元素的引导宽度对齐答案

【问题标题】：Bootstrap width alignment of elements元素的引导宽度对齐
【发布时间】：2015-05-05 08:43:01
【问题描述】：

我需要安排一个引导输入组和一个药丸导航栏，如下所示：

http://picload.org/image/cwgpppp/bootstrap.png

输入组应具有动态导航栏的宽度，并且取决于导航栏的措辞。我的 html 结构如下所示：

http://www.bootply.com/efEXkT1CSR

我不知道如何实现这一点。希望可以有人帮帮我！谢谢

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

一种可能性（有点混乱但确实有效）是使用display: inline-box 和position: absolute 的组合。

将导航和搜索组包裹在另一个元素中，例如<header>（<div> 也可以）。
将 display: inline-box 添加到 nav，这样它就不会占据其父级 (<header>) 的整个宽度，而是适合其子级的大小。
将position: absolute; top: 0; left: 0; right: 0; 添加到.form-group（在实际场景中使用自定义类，以免更改其他表单组）。这意味着header 不再受表单组宽度的影响，也会使表单组拉伸到页眉的左右边缘。
将position: relative; display: inline-block; padding-top: 40px; 添加到header。该位置使得表单组将定位到标题。显示使得header 不会占据其父级（<header>）的整个宽度，而是适合其子级（在本例中为nav）的大小。填充是因为nav因为绝对位置不会被搜索组下推。

最终结果应该是这样的：

HTML

<header>
    <div class="form-group">
        <div class="input-group">
            <input class="form-control" id="text" type="text" placeholder="Search ...">
            <span class="input-group-addon glyphicon glyphicon-search"></span>
        </div>
    </div>
    <ul class="nav nav-pills">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">One</a>
        </li>
        <li><a href="#">Two</a>
        </li>
    </ul>
</header>

CSS

header {
    position: relative;
    display: inline-block;
    padding-top: 40px;
}

.nav {
    display: inline-block;
}

.form-group {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo on Bootply

如果您有任何问题，请告诉我。

【讨论】：