Question

我希望在移动视图的品牌和菜单切换之间设置搜索栏，但搜索始终显示在导航栏下方或上方的单独行上。我想我需要覆盖一些Bootstrap CSS，但我找不到任何东西。

http://www.bootply.com/0I0LXI5JeE

Answer 1

在没有看到你的CSS的情况下，这很多就是猜测工作。这绝不是唯一的方法，但这将完成工作。

首先，在导航栏中包装您的品牌，搜索和菜单切换。

<nav class="navbar">
    <a class="navbar-brand"></a>
    <form class="navbar-form"></form>
    <a class="dropdown-toggle"></a>
</nav>

其次，请确保您的导航栏足够宽，以便在同一行显示您的品牌，搜索和菜单切换。

.navbar {
    width: 100%;    // for example
}

最后，您可以选择将它们排列在同一条线上。一切都会奏效。看看什么最适合你。

选项＃1：

.navbar {
    display: block;
}
.navbar-brand,
.navbar-form,
.dropdown-toggle {    
    display: inline-block;
    width: 33%;   // each element will have equal horizontal width
}

选项＃2：

.navbar {
    display: table;
}
.navbar-brand,
.navbar-form,
.dropdown-toggle {    
    display: table-cell;
}

选项＃3：

.navbar {
    display: flex;
    flex-direction: row;
    align-items: center;    // this will center them vertically
}
.navbar-brand,
.navbar-form,
.dropdown-toggle {    
    flex: 1;    // each element will have equal horizontal width
}

如何在移动视图中的品牌和菜单切换之间设置搜索框？

1 个答案: