0

我正在使用 Twitter Bootstrap 做一个简历页面，我希望它同时具有流畅的布局和响应式布局。这是页面。

这是代码：

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

如您所见，问题是当我尝试为前 2 个元素制作嵌套的流体网格时，它们都向左移动，并且在它们与行的第三个元素（技能部分）之间留有很大的空间.

查看文档，我认为这可能是因为流体布局默认包含左侧边栏，并且我的嵌套网格被视为这样。是这样吗？在那种情况下，我该如何摆脱它？

4

1 回答 1

2

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

换句话说，每个.row-fluid嵌套都会创建一个新.span12行，您可以根据需要将其分成 12 个跨度。

因此，您必须将跨度加起来为 12 才能填充该行：

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

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

于 2012-07-23T20:38:38.833 回答