html - 是否可以在 Twitter Bootstrap 中创建一个没有左侧边栏的可变宽度页面？

Question

我正在使用 Twitter Bootstrap 制作一个 CV 页面，我希望它同时具有流畅的布局和响应式布局。这是 page .

代码如下:

<div class="container-fluid">
<div class="row-fluid">
    <div class="row-fluid span7">
        <div class="span2">
            <img src="assets/img/scelta1.jpg" class="thumbnail pull-left"/>
        </div>
        <div class="hero-unit span5">
            <h1>Fabrizio Bianchi</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non urna ut nisl rhoncus gravida. 
            Morbi placerat libero at lectus gravida suscipit. Nam hendrerit dolor ut lacus euismod scelerisque. 
            Etiam vitae congue risus. Quisque vitae mattis mi. Nulla sed tristique felis. Mauris scelerisque augue a nunc aliquet consequat.
            </p>
        </div>
    </div>
        <div class="span5">
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 80%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 60%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 90%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress">
                <div class="bar" style="width: 70%"></div>
            </div>
        </div>

    </div>
</div>

如您所见，问题在于，当我尝试为前两个元素制作嵌套的流体网格时，它们都向左移动，并且在它们与行的第三个元素(技能部分)。

查看文档，我认为这可能是由于默认情况下流体布局包含左侧边栏，而我的嵌套网格也是如此处理的。是这样吗？在那种情况下，我该如何摆脱它？

Answer 1

流体网格基于百分比，这意味着它占据第一个“相对”父级的 XX% 宽度。

在其他术语中，每个 .row-fluid 嵌套都会创建一个新的 .span12 行，您可以根据需要将其分成 12 个跨度。

所以你必须让你的跨度加起来达到 12 才能填充行:

 <div class="row-fluid span7">
     <div class="span2">
        <!-- ... -->
     </div>
    <div class="hero-unit span10">
        <!-- ... -->
    </div>
</div>

这是普通网格和流体网格之间的主要区别。