我在这里读到了关于网格系统的内容:http://getbootstrap.com/css/#grid。虽然文档没有直接解决一行中有一列的情况,但我在这里看到了一个例子:http://getbootstrap.com/css/#grid-offsetting>示例代码的第三行。
目前,我正在将class .col-xs-12应用于包含标记的一列,它在所有视口维度上都工作得很好。但是,我想确保没有更好的方法来做到这一点。
谢谢!
我在这里读到了关于网格系统的内容:http://getbootstrap.com/css/#grid。虽然文档没有直接解决一行中有一列的情况,但我在这里看到了一个例子:http://getbootstrap.com/css/#grid-offsetting>示例代码的第三行。
目前,我正在将class .col-xs-12应用于包含标记的一列,它在所有视口维度上都工作得很好。但是,我想确保没有更好的方法来做到这一点。
谢谢!
4条答案
按热度按时间zsbz8rwp1#
我认为添加一个col*-12将是最好的做法。它将使网格中的所有行的行为相同。
示例:
联系我们
正如你所看到的,当你不添加col--12时,内容与其他行不一致(由于缺少填充)。所有相同的行将使未来的更改更容易。
你必须注意到col-12列与其他col-- 列不同,因为它们没有浮点数,请参阅:https://github.com/twbs/bootstrap/issues/10152
rvpgvaaj2#
好吧,如果你只有一个元素,并希望它使用容器的整个宽度(1170 px),那么你可能根本不需要.row/.col-xs-12。
看到这个Example,查看页面本身的源代码。
注意到上面的内容没有使用rows/cols吗?
在这种情况下,row/cols除了添加负margin(row)和padding(col)之外不会做任何事情。
此外,您指出的示例使用偏移,并且不是全宽,因此需要row/col。
yqhsw0fo3#
最后,你真的需要
row
+col-12
类的组合来进行单列布局,以保持与布局中其他多列行的一致性。这样可以防止布局中出现对齐错误,因为设计师可能会要求自定义外部檐槽与内部列檐槽不同。以下是我的概念证明的链接:https://codepen.io/martindubenet/full/OJVwEWv
zvms9eto4#
我知道这有点晚,但上面的答案没有考虑网格偏移类
你可以用这样的东西来居中一个列: