Question

下面是我正在处理的代码，如何将代码转换为带有行和列的引导网格布局。我希望将音量和存储分开放在一个单独的行中。

下面是它应该如何显示的图像。

<div class="container-fluid">
  <div class="row">
     <div class="col-md-3 col-lg-3>
         <div class="row">
         </div>
         <div class="row">
         </div>
     </div>
  </div>
</div>

我已经在css中实现了它，但我不确定如何将bootstrap网格系统应用于它。下面是同样的小提琴。 http://jsbin.com/tehijapi/4/edit

Answer 1

好。我相信你想要一排由8列组成。如果我找到了你，那就是你如何实现这一目标。

根据内部列的宽度，创建一个.col-xs-X类的包装器。

然后您创建宽度为100％的自定义列，分别为 X ，其中X是列数。

<强> HTML

<div class="container">

    <div class="row">

        <div class="col-xs-3 col-xs-offset-4">

          <div class="row">

            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>
            <div class="col-xs-1 col-xs-1-custom"></div>

          </div>

        </div>

    </div>

</div>

<强> CSS

.col-xs-1-custom{
    width: 10.5%; /* 100/8 = 12.5% and 2% taken to let margins appear */
    background: green;
    height: 25px;
    margin-left: 5px;
}

<强> Bootply example.

在你的情况下，它的100/8 = 12.5％。但是如果你想在这些列之间留有空格，你必须使宽度减小，以免它们溢出。在我的例子中我约。花了2％才使边距不会溢出。

您还可以计算保证金的确切数量＆amp;每个媒体查询断点的宽度。就我而言，margin从293px（.col-xs-3）@ 1170px断点中获取40px，因此对于您的列，100％宽度不是293px而是293px - 40px。

还有另一种方法可以使用LESS / SASS自定义@grid-columns变量，看看它在重新编译版本中的外观，只需从那里拖动所有设置。

这是 bootstrap customizer 如果您没有使用less / sass，它将为您完成所有工作。

Bootstrap列有两行和列

1 个答案: