我需要一些帮助来弄清楚为什么 bootstrap 没有正确地分隔我的列。我在下面用幻灯片放映行创建了一个 fiddle ,下一行有 3 列。由于某种原因,这三列是齐平的,而不是像它们应该的那样居中。
谁能告诉我我做错了什么?
<header class="header">
<div class="container">
<div class="row" id="header">
<div class="span12">
<h1> Header</h1>
</div>
</div>
</div>
</header>
<br><br>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="row">
<div id="user1" class="span4 ">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user2" class="span4">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div id="user3" class="span4 ">
<img src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
<div class="clear"></div>
</div>
</div>
最佳答案
希望我答对了你的问题。 Bootstrap 类 row
有大约 -20px 的边距。所以约定是在其中有一个带有 span
类的元素,它给它 margin-left 20px。
您的问题不在于三个框,而在于它上面的行。
<div class="row">
<img src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style="margin: 0px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
</div>
在上面的代码中,该行内部没有 span 类,因此图像没有 20px 的 margin-left。您需要为 img 提供一个类 say span12
并删除内联样式边距。
<div class="row">
<img class="span12" src="http://dummyimage.com/1200x425/000/fff&text=Slide+Show+1200+x+425" style=" border: 0px solid rgb(0, 0, 0);" />
</div>
参见 fiddle
关于css - 右侧的 Bootstrap 冲洗列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16238031/