Question

好吧我的问题是当我处于桌面分辨率时，我的导航栏占用了两行，当我转到移动尺寸时，它非常适合。我已经完成了几个小时的代码无济于事。任何帮助将不胜感激。 HTML代码可以在下面找到。

<!DOCTYPE HTML>

<!-- HTML -->

<html>

<!-- Header -->

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <link href="css/styles.css" rel="stylesheet">

</head>

<!-- Header End -->

<!-- Body -->

<body>

    <!-- NavBar -->

        <div class="navbar navbar-inverse navbar-fixed-top">

            <!-- NavBar Header -->

            <div class="navbar-header">

                <!-- Fiaware Branding -->

                <a href="#" class="navbar-brand">FiAware</a>

                <!-- Fiaware Branding End -->

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <!-- Desktop Visible/ Mobile Visible Upon Click -->

                <div class="navbar-collapse collapse navbar-responsive-collapse">

                    <ul class="nav navbar-nav">

                        <li class="active"><a href="http://fiaware.com/index.html">Home</a></li>

                        <li><a href="http://fiaware.com/about.html">About</a></li>

                        <li><a href="http://fiaware.com/forums">Forums</a></li>

                            <!-- Dropdown Menu -->

                            <li class="dropdown">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <b class="caret"></b></a>

                                <ul class="dropdown-menu">

                                <li><a href="http://fiaware.com/roller.html">Roller-In Development</a></li>

                                </ul>

                            </li>

                            <!-- Dropdown Menu End -->

                    <li><a href="http://fiaware.com/support.html">Support</a></li>

                    <li><a href="http://fiaware.com/contact.html">Contact</a></li>

                    </ul>

                </div>

                <!-- Desktop Visible/ Mobile Visible Upon Click End -->

            </div>

            <!-- NavBar Header End -->

        </div>

    <!-- NavBar -->

    <!-- Jumbotron -->

    <div class="jumbotron text-center">

        <h1>We makes your ideas a reality</h1>
        <p>We are a game development studio that is eager to let everyone give their two cents in our games.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn More</a></p>

    </div>

    <!-- Jumbotron End -->

    <!-- Fixed Footer -->

    <div class="navbar navbar-default navbar-fixed-bottom">

        <div class="container">

            <p class="navbar-text pull-left">Site Built By Stormy Wentworth & Derek Sisco <br>Copyright &copy; 2017 FiAware Ltd.<em> All right reserved to their respective owners.</em></p>

            <a href="#" class="navbar-btn btn-info btn pull-right">Donate - Coming Soon</a>

        </div>

    </div>

    <!-- Fixed Footer End -->

    <!-- Script -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Script End -->

</body>

<!-- Body End-->

Answer 1

修改：

<div class="navbar-header">

要：

<div class="navbar-header" style="float:none;">

Answer 2

试试这个：

    <div class="navbar-header">
    <a href="#" class="navbar-brand">FiAware</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>
</div> <!-- close the navbar-header" div here -->

Bootstrap Navbar占用了两行

2 个答案: