Floating unorder lists with Bootstrap in HTML?

I am using a bootstrap template found here, and I would like to float my text left, or at least order it so that my list does not create new lines. The CSS is extremely dense, is there a way to do this in the HTML of my page?

Example 1: How I would like to maintain my list regardless of how many items added.

Example 2: How my list appears after adding more items

<!-- 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>