Bootstrap 4 –导航栏搜索表单最小宽度

时间:2018-06-22 11:17:55

标签: css twitter-bootstrap bootstrap-4 navbar

如何在Bootstrap 4导航栏中使用最小宽度制作100%宽度的搜索表单? 我在这里的标记:https://jsfiddle.net/bfsrjo23/

<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
    </ul>
</div>
<form class="w-100 py-2">
    <input type="text" class="form-control border" placeholder="Search...">
</form>

我将表格放在折叠外部,以使其始终可见(笔记本电脑位于第一行,移动位于第二行)。在平板电脑模式下工作正常(视口宽度约为880px),搜索框太短。我想添加“最小宽度”,如果大小未通过,则让表单进入第二行。

3 个答案:

答案 0 :(得分:0)

像这样使用CSS:

#yourformId > .input-group {
  display: inline;
}

答案 1 :(得分:0)

只需在导航中添加d-inline类,就像这样:


<nav class="navbar navbar-expand-md navbar-light d-inline bg-faded">
<a href="/" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar5">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">LongLink1 <span class="sr-only">Home</span></a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink5</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink6</a></li>
        <li class="nav-item"><a class="nav-link" href="#">LongLink7</a></li>
    </ul>
</div>
<form class="w-100 py-2">
    <input type="text" class="form-control border" placeholder="Search...">
</form>

答案 2 :(得分:0)

找到可接受的解决方案-关键是从CSS中删除flex-wrap:wrap,例如使用@media(min-width:992px),搜索表单必须具有“ display:flex; flex-basis:100%”或“ width :100%”。这会将搜索移到第二行。