Bootstrap - 对齐问题

Question

我有一个漫画网站，我正在重做-Hitting Trees with Sticks。

我正在尝试从当前可怕的 1990 年布局转变为这种布局（颜色和字体只是占位符 atm）...

我认为 CSS div 的布局方式如下：

不管怎样，

我正在尝试让最右侧的搜索栏在搜索到某些内容后能够向下展开。现在我向下推它下面的行。它应该独立于这些行。基本上，我的主要目标是让搜索栏与前两个框（突出显示的漫画和最新的艺术作品）内联，但也不下推下面输出的漫画......它只需要一个 独立的列。

    <div class="row-fluid show-grid">
    <div class="span6 offset2">
        <img src="./images/highlighted comic.png"/>
        <img src="./images/latest artwork.png"/>
    </div>
    <div class="span2">
        <?php include 'include/search_field.php'; ?>
    </div>
</div>

//Where the comics are outputted:
<div class="row-fluid show-grid">   
    <div class="span6 offset2">
        <div class="allimages">
            <div class="row-fluid show-grid">   
                <div class="span6">
                    <h3>latest</h3>
                    <?php include 'scripts/paging.php'; ?>
                </div>
                <div class="span2">
                    <h3>hot</h3>    
                    <?php echo hot(7, $site); ?>
                </div>
            </div>
        </div>
    </div>
</div>

而且我不能只将<?php include 'include/search_field.php'; ?> 移动到漫画输出的下方（我知道这将解决扩展搜索推下漫画的问题......但是搜索框需要与突出显示的漫画和最新作品框对齐）

---

这是我搜索时的样子：

预搜索：

搜索时：

有什么想法吗？

谢谢！

---

编辑：我无法将搜索框与左侧框齐平

    <div class="row-fluid">
    <div class="span8 offset2">
        <div class="row-fluid">
            <div class="span5"><img src="./images/highlighted comic.png"/></div>
            <div class="span4"><img src="./images/latest artwork.png"/></div>
        </div>
        <div class="row-fluid">
            <div class="comicDisplay">
                <div class="well">
                    <div class="row-fluid"> 
                        <div class="span7"><h3>Latest</h3>  <?php include 'scripts/paging.php'; ?></div>
                        <div class="span2"><h3>Hot</h3> <?php echo hot(7, $site); ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="span2">
        <?php include 'include/search_field.php'; ?>
    </div>
</div><!--End top row fluid-->

Answer 1

独立列

就是这样！

看看这个（来自http://jsfiddle.net/Q7k7W/3/）：

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<style type="text/css">
.b {
    border: 1px solid #ccc;
    padding: 10px;
}
</style>

<div class="container-fluid" style="margin-top: 20px;">
    <div class="row-fluid">
        <!-- The main content column placed on the left (for appropriate viewports/browser widths) -->
        <div class="span9 b">
            <div class="row-fluid">
                <div class="span8 b">Highlighted Comic</div>
                <div class="span4 b">Latest Artwork</div>
            </div>
            <div class="row-fluid">
                <div class="span8 b">Latest</div>
                <div class="span4 b">Hot</div>
            </div>
        </div>
        <!-- 
        The search/sidebar column placed on the right.
        The height of this column shouldn't affect the height of the left column.
        -->
        <div class="span3 b" style="height: 300px;">
            Search
        </div>
    </div>
</div>

您将为两列创建两个 div（一个用于左侧的主要内容，另一个用于右侧的搜索/侧边栏）。在上面的 jsfiddle 示例中，div 被嵌套（参见 Bootstrap scaffolding docs 的“流体嵌套”部分）。

而且我不能只是搬到 在输出漫画的下方（我知道这可以解决 扩展搜索的问题推倒了漫画……但是 搜索框需要与突出显示的漫画对齐，并且 最新作品盒）

如果您将搜索移动到不同的列（如上例所示），您应该仍然能够保持对齐。

搜索栏之所以下推漫画，是因为它与突出显示的漫画和最新作品在同一行。目前铺设的方式是like so。您需要按照your second image 中的描述进行布局：左块和右块（就像上面的 jsfiddle 示例一样）。

您可能会发现这两个资源也很有帮助：

• http://css-tricks.com/all-about-floats/
• http://www.barelyfitz.com/screencast/html-training/css/positioning/