Question

我需要一些帮助来弄清楚为什么bootstrap没有正确地排列我的列。我在幻灯片放映行下面创建了一个小提琴，下一行有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的元素，它给出了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。你需要给一个类说{im} {im}并删除内联样式边距。

span12

请参阅fiddle

Answer 2

使用row-fluid show-grid将其定位到中间，如下所示

<div class="container">
    <div class="row-fluid show-grid">
        <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-fluid show-grid">
        <div id="user1" class="span4 ">
            <img class="span12" 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 class="span12" 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 class="span12" src="http://dummyimage.com/370x150/000/fff" style="margin: 10px 0px 0px; border: 0px solid rgb(0, 0, 0);" />
        </div>
        <div class="span4"></div>
        <div class="clear"></div>
    </div>
</div>

Bootstrap Flushing Columns位于右侧

2 个答案: