html - 如何防止导航元素包装在 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>

标签： htmlcssbootstrap-4

Answer 1

使用flex-nowrap类作为列表。d-flex如果ul还没有，也可以使用flex，