Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/90.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引导中div元素的偏移垂直位置_Html_Twitter Bootstrap_Vertical Alignment_Fluid Layout - Fatal编程技术网

Html Twitter引导中div元素的偏移垂直位置

Html Twitter引导中div元素的偏移垂直位置,html,twitter-bootstrap,vertical-alignment,fluid-layout,Html,Twitter Bootstrap,Vertical Alignment,Fluid Layout,我正在尝试使用Twitter引导和流体网格正确地垂直对齐偏移元素。(注意:网格自定义为30列) 考虑到红色框,这是尝试放置的div: 这是我的代码的当前实际位置: 这是我正在使用的代码。根据图片,不确定如何使下方的红色框移动到其上方的空白区域 <div class="container-fluid nomargin"> <div class="row-fluid span30 nomargin"><div style="height:10px"></di

我正在尝试使用Twitter引导和流体网格正确地垂直对齐偏移元素。(注意:网格自定义为30列)

考虑到红色框,这是尝试放置的div: 这是我的代码的当前实际位置:

这是我正在使用的代码。根据图片,不确定如何使下方的红色框移动到其上方的空白区域

<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div>  <!--    Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
  <!--Body content-->
   <div style="height:100px"></div>
</div>
<div class="span6 white-box">
  <!--Body content-->
   <div style="height:300px"></div>
 </div>

 <div class="span16 white-box">
  <!--Body content-->
   <div style="height:100px"></div>
 </div>
 </div>

您需要将其视为两列,在左边的列中有嵌套的行。从你发的代码我看不出正确的尺寸。但希望这段代码能给你一些启发

<div class="row">
    <div class="span18">
        <div class="row">
            <div class="span18">This is a row on the left side.</div>
        </div>
        <div class="row">
            <div class="span18">This is a row on the left side.</div>
        </div>
    </div>
    <div class="span12">
        This is the content on the right side.
    </div>
</div>

这是左边的一排。
这是左边的一排。
这是右边的内容。

此设置也适用于流体布局。谢谢如果使用流体布局,子跨距基于整行-列计数,而不是父行-列跨距。此外,我相信这只适用于流体类的最新twitter补偿实现。