时间戳

首页 > 解决方案 > 如果我的导航栏上的移动屏幕尺寸，如何以最大宽度移动下一行的搜索栏？

html - 如果我的导航栏上的移动屏幕尺寸，如何以最大宽度移动下一行的搜索栏？

问题描述

我的导航栏上有一个搜索栏，但如果显示在 xs 或移动设备中，我希望它以最大宽度显示在下一行。

这是我的代码：

<nav class="navbar navbar-expand-md fixed-top-sm justify-content-start flex-nowrap bg-dark navbar-dark">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar2">
    <span class="navbar-toggler-icon"></span>
 </button>
 <a href="/" class="navbar-brand px-2">Top</a>   <!-- brand -->
 <ul class="navbar-nav flex-row mx-auto">
    <li class="nav-item active">
        <a class="nav-link px-2 d-none d-sm-block" href="#">Link</a>  <!-- Item 1 -->
    </li>
    <li class="nav-item col-sm-12">
        <a class="nav-link px-2" href="#">Link</a>  <!-- Item 2 -->
    </li>
</ul>


<div class="col-xs-3 col-sm-6 col-md-6 col-lg-6 mx-auto">
        <div class="input-group-prepend">
            <input id='urlurl' type="url" class="form-control" placeholder="Search" pattern="https?://.+" required />
            <span class="input-group-btn">
                <button class="btn btn-primary" style="background-color: #0275D8; border-color: #0275D8;" type="button" >Test</button>
            </span>
        </div></div></nav>

标签： htmlcsssearchlayoutbootstrap-4

解决方案

只需从导航中删除“flex-nowrap”。它应该工作。您正在使用弹性框布局，并且“flex-nowrap”类不允许在下一行包装项目。

推荐阅读