Bootstrap 元素的宽度对齐

Question

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

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

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

http://www.bootply.com/efEXkT1CSR

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

Answer 1

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

将导航和搜索组包裹在另一个元素中，例如 <header>（<div> 也可以）。
将 display: inline-box 添加到 nav，这样它就不会占据其 parent (<header>) 的整个宽度，而是适合到其 children.
将position: absolute; top: 0; left: 0; right: 0;添加到.form-group（在实际场景中使用自定义class，这样它就不会改变其他表单组）。这将意味着 header 不再受表单组宽度的影响，并且还会使表单组拉伸到 header.
将 position: relative; display: inline-block; padding-top: 40px; 添加到 header。该位置使表单组将定位到 header。显示是 header 不会占据其 parent (<header>) 的整个宽度，而是适合其 children 的大小（在本例中 nav). padding是因为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

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

Bootstrap 元素的宽度对齐

Bootstrap width alignment of elements

html

css

grid

twitter-bootstrap