Question

我想创建一个像这样的div，它以主div的中心为中心。这个div应该有大约500px的宽度。它看起来像这样：

我想使用bootstrap网格，因此它会响应，但我很难与那些因为内容出现在同一行。我试着这样做：

<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;

}

由于某些原因，它不起作用，并且全部出现在同一行中，并且不考虑偏移列。有人可以帮帮我吗？

Answer 1

为了让网格工作，你必须将你的div包装在div的容器class内（参见bootstrap docs grid）。此外，bootstrap首先是移动的，这意味着如果您指定给定col-xs-*，则此class将传播到更大的列类，因此如果您需要在所有x，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>

Answer 2

我开始查看你的代码，我最终做到了这一点并且非常接近你想要的。引导程序是这样的：你必须为行设置div，然后为col设置div。这里的大小是HTML，如下所示：

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
        <a href="#" class="btn btn-block">GET DETAILS</a>
    </div>
    <div class="row text-center text">
      <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>
</div>

Bootstrap网格样式忽略了偏移量

2 个答案: