Question

这里的一切都很美好和流畅：

<div class = 'color-strip row-fluid'>
    <div class = 'col-xs-1' style= 'background-color: yellow; height: 20px'></div>  <div class = 'col-xs-1' style= 'background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'background-color: red; height: 20px'></div>
</div>

这都是基于百分比的，所以无论你走多远，这些条纹占用相同数量的比例空间。那么为什么呢，当我让屏幕移动大小时，div开始包裹？真的很烦人。

Answer 1

这是由于填充。如果你这样覆盖col-xs-1：

.col-xs-1 {
    padding: 0;
}

它工作。

或者如果您不想要覆盖引导程序，请设置样式：

<div class = 'color-strip  row'>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: red; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: yellow; height: 20px'></div>
    <div class = 'col-xs-1' style= 'padding: 0;background-color: red; height: 20px'></div>
</div>

Answer 2

bootstrap 3中没有row-fluid，只有row。行必须位于container。

如果bootstrap是流动的，为什么这些div开始包装？

2 个答案: