1

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

4

2 回答 2

2

我希望你的问题是正确的。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>

在上面的代码中，该行内部没有跨度类，因此图像没有 20px 的左边距。你需要给一个类说span12img 并删除内联样式边距。

 <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>

见小提琴

于 2013-04-26T14:01:01.397 回答
0

使用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>
于 2013-04-26T14:18:36.177 回答