Question

我正在使用找到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

您必须在 container-fluid 中设置<div class="collapse navbar-collapse navbar-ex1-collapse">的容器，以便它可以拉伸整个屏幕宽度，或者您必须通过设置导航来覆盖bootstrap CSS navbar-nav 显示：内联块; 并设置右边距以相应地隔开它们等...

使用HTML中的Bootstrap浮动无序列表？

1 个答案: