Question

我有一个带有3个元素的bootstrap v.4导航栏。元素均匀对齐，以便搜索栏在导航栏中居中。当它坍塌时，需要全宽。

这是我现在的HTML：

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar5">
    <span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">Brand</a>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
    <form class="mx-2 my-auto d-inline w-100">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="...">
            <span class="input-group-btn">
            <button class="btn btn-outline-secondary" type="button">GO</button>
          </span>
        </div>
    </form>
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="ion-ios-gear-outline"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
    </ul>
</div>

这里的问题是，如果我有任何小于w-100的内容，菜单图标会被拉到搜索栏旁边，我想在右下角找到它，我该如何解决？我想做的是类似于this。

Answer 1

像w-100这样的大小调整工具没有响应。使用列（例如col-md-3）来设置宽度......

https://www.codeply.com/go/FVo4F81ShR

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="/" class="navbar-brand">Codeply</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCodeply">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarCodeply">
        <form class="mx-2 my-auto d-inline mx-auto col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="...">
                <span class="input-group-btn">
            <button class="btn btn-outline-secondary" type="button">GO</button>
          </span>
            </div>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    ...
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                    ...
                </div>
            </li>
        </ul>
    </div>
</nav>

Bootstrap 4 - 使中心搜索表单仅在小屏幕上占据全宽

1 个答案: