在12栅格引导布局中安装8列布局？
在12栅格引导布局中安装8列布局？
提问于 2017-03-17 15:21:04
好吧，我试着用Bootstrap重新创建这个页面，但是我被困在这里了。
我的两个问题是：
- 这些行应该使用哪些html元素？
- 如何将12列布局分成8个等份？
代码示例：
<div class="container" style="margin-top: 3%; ">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<input type="text" class='form-control' placeholder="First Name">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<input type="text" class='form-control' placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<input type="text" class='form-control' placeholder="Display name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<input type="text" class='form-control' placeholder="Email Address">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<input type="password" class='form-control' placeholder="Password">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<input type="password" class='form-control' placeholder="Confirm Password">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<button class="btn btn-secondary">I Agree</button>
</div>
<div class="col-xs-9">
<p>
By clicking <span class="label label-primary">Register</span> you agree to the <a href=#>Terms and Conditions</a> set out by this site, including our Cookie Use
</p>
</div>
</div>
<div class="row">
</div>
<div class="row" style="">
<div class="col-xs-6">
<button class="btn btn-primary btn-block" style="font-weight: bold;">Register</button>
</div>
<div class="col-xs-6">
<button class="btn btn-success btn-block" style="font-weight: bold; ">Sign In</button>
</div>
</div>
</div>
</div>
</div>回答 4
Stack Overflow用户
回答已采纳
发布于 2017-03-17 15:31:18
另一种方法是将这一行分成两排，每排四次，如下所示：
<div class="row">
<div class="col-xs-6>
<div class="row">
<div class="col-xs-3></div>
<div class="col-xs-3></div>
<div class="col-xs-3></div>
<div class="col-xs-3></div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3></div>
<div class="col-xs-3></div>
<div class="col-xs-3></div>
<div class="col-xs-3></div>
</div>
</div>
</div>因此，您将有八个相等的部分，并将保存包装。
这些行应该使用哪些html元素--在这里您可以尝试使用div、span，甚至hr。试试看吧。:)
Stack Overflow用户
发布于 2017-03-17 15:25:29
尝尝这个
<div class="row">
<div class="col-xs-2></div>
<div class="col-xs-8">{YOUR COLORS HERE}</div>
<div class="col-xs-2></div>
</div>您可以使用颜色作为图像或一组div包装在一个容器中，让它们始终漂浮在同一条线上。
<div style="position:relative;display:block;width:100%;height:16px">
<div style="position:relative;display:inline-block;width:12.5%;background-color:red"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:blue"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:green"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:orange"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:teal"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:cyan"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:purple"></div>
<div style="position:relative;display:inline-block;width:12.5%;background-color:black"></div>
</div>这将为您在彩色行的两边提供相同的填充:)希望这对您有用。此外，您也可以对所有行做同样的操作，以便使所有内容都像图像一样对齐，只是稍微填充了一点，并且仍然是居中的。或将行分成2 (6)行，然后每一行分成4 (3)行。
Stack Overflow用户
发布于 2017-03-17 17:52:27
尝尝这个
<div class="row">
<div class="row col-xs-3">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row col-xs-3">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row col-xs-3">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row col-xs-3">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row col-xs-3">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>或者这个
<style>
.colorbar{
display: inline-block;
margin: -2px;
width: 12.5%;
height: 10px;
}
/*add some color*/
</style>
<div class="row">
<span class="colorbar"></span>
<span class="colorbar"></span>
<span class="colorbar"></span>
<span class="colorbar"></span>
<span class="colorbar"></span>
<span class="colorbar"></span>
<span class="colorbar"></span>
<span class="colorbar"></span>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42861272
复制相关文章
相似问题
腾讯云开发者
