css - 右侧的 Bootstrap 冲洗列

Question

我需要一些帮助来弄清楚为什么 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>

http://jsfiddle.net/yoderman94/ccnfu/

Answer 1

希望我答对了你的问题。 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