Question

我想了解它是如何运作的。

我制作了专栏并将<hr>放在里面只是为了说明。

这是我到目前为止所尝试的内容：

左边和右边的行边距-15px。列填充左右15px。

宽度，与bootstrap相同。

列向左浮动。

我不明白为什么我的不工作？例如，4列只有3列，而另一列会到达底部。宽度是正确的。我有点沮丧。

编辑：

HTML

<div class="row">
 <div class="column">
  <hr>
 </div>

 <div class="column">
  <hr>
 </div>

 <div class="column">
  <hr>
 </div>
</div>

CSS

.row {
margin-left: -15px;
margin-right: -15px:
}

.column {
padding-left: 15px;
padding-right: 15px;
float:left;
width: 33.33333%
}

Answer 1

你的工作不像Bootstrap，因为Bootstrap使用border-box大小调整。为了使你的工作相同..

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.row {
  margin-left: -15px;
  margin-right: -15px:
}

.column {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
  width: 33.33333%
}

http://www.codeply.com/go/BnMCZvKZ5N

Answer 2

不确定你想要什么，但看起来你想要3个colums？

试试这个：

<div class="row">
    <div class="col-md-4">
        1 / 3
    </div>
    <div class="col-md-4">
        2 / 3
    </div>
    <div class="col-md-4">
        3 / 3
    </div>
</div>

小小的言论： col-md-12是一栏

所以，如果您想要2列，则执行col-md-6（两次，并且始终是行级）

它和其他一切一样

试试这个： http://getbootstrap.com/css/#grid

Bootstrap Grid如何真正起作用？

2 个答案: