如何防止导航元素包装在Bootstrap中

Question

我使用<ul class="nav nav-tabs">，包装在一个容器中，并且当设备达到标记为容器末端的断点时，它会换行到一个新行。如何防止这种情况发生，以便所有内容都保持内联，我可以水平滚动？

编辑：包含的代码

<div class="jumbotron border">
    <div class="row">
        <div class="col">
            <img src="image.jpg" alt="Placeholder for image">
        </div>
    </div>
    <div class="row">
        <div class="col">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

使用flex-nowrap类作为列表。如果d-flex尚未ul，

，也请使用flex