0

我使用 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>

我有一个行水平对齐和宽度问题，图片更好地说明了这一点： 在此处输入图像描述

  • 红色背景太左了
  • 右侧没有填充

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

问题是：这是某种错误还是我只是缺少一些包装 html 元素或对 .less 变量的更改？

4

1 回答 1

1

据我所知，这是按预期工作的。为内容区域添加一个内部包装 div 并将您的 css 应用到该内容区域。

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

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

于 2013-01-15T22:08:15.113 回答