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，这样它就不会占用其父级（<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

如果您有任何问题，请与我们联系。

元素的Bootstrap宽度对齐

1 个答案: