Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 在Twitter引导中,有没有可能在没有左侧边栏的情况下创建一个流体宽度页面?_Html_Css_Twitter Bootstrap - Fatal编程技术网

Html 在Twitter引导中,有没有可能在没有左侧边栏的情况下创建一个流体宽度页面?

Html 在Twitter引导中,有没有可能在没有左侧边栏的情况下创建一个流体宽度页面?,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用Twitter引导做一个简历页面,我希望它既有流畅的布局又有响应性的布局。这是你的电话号码 代码如下: <div class="container-fluid"> <div class="row-fluid"> <div class="row-fluid span7"> <div class="span2"> <img src="assets/img/scelta1.jpg" clas

我正在使用Twitter引导做一个简历页面,我希望它既有流畅的布局又有响应性的布局。这是你的电话号码

代码如下:

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

法布里齐奥·比安奇
Lorem ipsum dolor sit amet,是一位杰出的献身者。整数非urna ut nisl rhoncus孕妇。
Morbi placerat libero在lectus gravida suscipit。南亨德雷特·多洛尔·拉库斯·尤伊斯莫·斯克利斯。
康格之旅。维塔马蒂斯米。无尾猫。莫里斯·斯克利斯克·奥古斯是一位修女。

技巧 技巧 技巧 技巧 技巧
如您所见,问题在于,当我尝试为前两个元素创建嵌套流体网格时,它们都会向左移动,在它们和行的第三个元素(技能部分)之间留有很大的空间


查看文档,我认为这可能是因为流体布局默认包含一个左侧边栏,并且嵌套网格被视为左侧边栏。是这样吗?在这种情况下,如何去除它?

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

在其他术语中,每个
.row流体
嵌套都会创建一个新的
.span12
行,您可以按任何方式将其划分为12个跨距

因此,您必须将跨距相加到12才能填充该行:

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


这是正常网格和流体网格之间的主要区别。

+1是一个好答案,但我建议使用row fluid/span7/row fluid/span2代替“row fluid span7”/span2