我想创建一个像这样的 div,它位于主 div 的中心。 这个 div 应该有大约 500px 的宽度。 它看起来像这样:
我想使用 bootstrap grid 以便它响应,但我遇到了困难,因为内容出现在同一行中。我试着这样做:
<div class="center">
<div class="row col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
<a href="#" class="btn btn-block"> GET DATIALS</a>
<p class=" col-xs-3 col-sm-3 col-md-3 col-lg-3"></p>
</div>
<div class="row col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line">
Text 1
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line">
Text 2
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
Text 3
</div>
</div>
</div>
和CSS:
.line{
border-right: 1px solid #ccc;
}
.delete{
background-color: hsl(160, 0%, 18%) !important;
color: #fff !important;
border-radius: 0 !important;
height: 47px;
}
由于某些原因,它不起作用,并且所有内容都出现在同一行中,并且不考虑偏移列。有人可以帮助我吗?
最佳答案
为了让网格工作,您必须将您的 div 包装在一个带有容器 class
的 div
中(参见 bootstrap docs grid )。此外,bootstrap 是移动优先的,这意味着如果您指定给定的 col-xs-*
此 class
将传播到更大的列类,因此如果您需要相同数量的所有 xs、sm、md 和 lg 中的列您只需要指定 xs。
现场演示:
http://www.bootply.com/QztQES4NTI
标记
<div class="center text-center container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ">
<!-- I added btn-primary but feel free to remove it if not needed -->
<a href="#" class="btn btn-block btn-primary"> GET DATIALS</a>
<p class=" col-xs-3"></p>
</div>
</div>
<div class="row">
<div class="col-xs-offset-4">
<div class="col-xs-2 line">
Text 1
</div>
<div class="col-xs-2 line">
Text 2
</div>
<div class="col-xs-2 ">
Text 3
</div>
</div>
</div>
关于jquery - Bootstrap 网格样式忽略偏移量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39380196/