Question

我使用Twitter Bootstrap完成了一个非常基本的布局：

<body>
<div class="container">

    <!-- Navbar -->
    <div class="navbar">
        <div class="navbar-inner">
            ...
        </div>
    </div>

    <!-- Carousel -->
    <div class="row">
        <div class="span12">
            <div id="myCarousel" class="carousel slide" >
                ...
            </div>
        </div>
    </div>

    <!-- the content -->
    <section id="first_sect">
        <div class="row  alpha07">
            <div class="span12">
                <h1>header</h1>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </section>

    <!-- whitespace row -->
    <div class="row  alpha07">
        <div class="span12">
            &nbsp; 
        </div>
    </div>

    <!-- adress footer -->
    <section id="adress section">
        <div class="row  alpha07">...
        </div>
    </section>
    <!-- End of Bootstrap Container -->
</div>
</body>

我有一排水平对齐和宽度问题，图片更好地说明了这一点： enter image description here

红色背景太多了
右边没有填充

Bootstrap是开箱即用的，没有进行任何更改。网页代码：http://jsfiddle.net/thomson256/DMnhL/10/ Twitter bootstrap 2.2.2版

问题是：这是一些bug还是我只是缺少一些包装html元素或更改.less变量？

Answer 1

就我所见，这是按预期工作的。为内容区域添加内部包装div并将css应用于此。

.inner {
  padding: 2em;
  background: rgba(150, 50, 50, 0.7);
}

这是一个分叉：http://jsfiddle.net/gyf6c/1/。

Twitter Bootstrap 2.2.2行水平对齐和宽度混合940px和960px

1 个答案: