Question

我在引导流体布局中遵循布局

<div class="container">
   <div class="row-fluid">
     <div class="span3 offset1"> </div>
     <div class="span3"> </div>
     <div class="span3"> </div>
   </div>
</div>

我的问题是我希望将所有三个跨距完全对齐因为我正在使用流体布局......在全屏幕上方布局完全对齐中心，因为我已经为第一个div应用了固定偏移

但随着它的宽度变小。所有上述3个div都没有完全对齐，因为偏移是固定的。

我想，这是发生了什么...... 在bootstrap我们有12个colums，所有列占用9个跨度..剩余3个跨度（奇数）因为那个奇怪的数字，我无法在两边留下任何跨度......

有没有解决方案？.....

Answer 1

那里应该有一排。

<div class="container">
    <div class="row-fluid">
       <div class="span3 offset1"> </div>
       <div class="span3"> </div>
       <div class="span3"> </div>
    </div>
</div>

解决此问题的非引导方式：

<div class="container">
    <div style="width: 80%; margin: 0 auto;">
        <div class="row-fluid">
            <div class="span3 offset1"> </div>
            <div class="span3"> </div>
            <div class="span3"> </div>
        </div>
    </div>
</div>

新元素的宽度也可以是最大宽度，静态宽度也是如此。

Answer 2

Bootstrap的跨度浮动到左侧。您可以使用以下方法覆盖此行为：

<div class="container">
<div class="span9" style="float: none; margin-left: auto; margin-right: auto"> 
    <div class="row-fluid">
        <div class="span4">... </div>
        <div class="span4">... </div>
        <div class="span4">... </div>
    </div>
</div>
</div>

Answer 3

喜欢这个

<div class="row-fluid">
     <div class="span3 offset1"> </div>
     <div class="span3"> </div>
     <div class="span3"> </div>
</div>


<div class="container">

而不是：

<div class="row-fluid">

我认为点击下面的链接重复问题

Is it possible to horizontally center align a row of bootstrap spans that don't add up to 12?

将三个div对齐在中心

3 个答案: