javascript - 在 HTML 中使用 Bootstrap float 无序列表？

Question

我正在使用找到的 Bootstrap 模板 here ，并且我想将文本向左浮动，或者至少对其进行排序，以便我的列表不会创建新行。 CSS 非常密集，有没有办法在我的页面的 HTML 中做到这一点？

示例 1:无论添加了多少项，我都希望如何维护我的列表。

示例 2:添加更多项目后我的列表如何显示

<!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">SLA Electronic Waste Route 1</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">SLA Electronic Waste Route 2</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">SLA Electronic Waste Route 3</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">SLA Bulky Item Route 1</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">SLA Bulky Item Route 2</a>
                    </li>
                     <li>
                        <a class="page-scroll" href="#contact">SLA Bulky Item Route 3</a>
                    </li>
                           <li>
                        <a class="page-scroll" href="#contact">South Los Angeles Bulky Item Route 4</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Answer 1

您必须设置<div class="collapse navbar-collapse navbar-ex1-collapse">的容器在 container-fluid 内，这样它就可以拉伸(stretch)屏幕的整个宽度，或者您必须通过设置 nav navbar-nav 来覆盖 bootstrap CSS Display: inline-block ; 并设置 right-margin 以相应地间隔它们等等...