窄视口上的引导导航栏失真答案

【问题标题】：Bootstrap navbar distortion on narrow viewport窄视口上的引导导航栏失真
【发布时间】：2016-10-29 16:13:37
【问题描述】：

我是新手。我制作了一个导航栏，但在狭窄的视口上会变形（在 ipad mini 上效果很好，但在手机上会变形）。在手机上，导航栏被破坏，导航栏的每个元素都出现在单独的行中；这是不可取的。我希望整个导航栏只出现在一行中。我在下面附上了我的代码。请提出解决上述问题的方法。

    {% load staticfiles %}
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Jaldi' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/static/home/css/base.css">
</head>
<title>My Project</title>
<nav class="navbar navbar-default"></nav>
<nav class="navbar navbar-default navbar-fixed-top">        
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">My Project</a>
        </div>
        <ul class="nav navbar-nav nav-center">
            <li>
                <form class="navbar-form navbar-left navbar-input-group" role="search" method="POST" action="/question/add/">{% csrf_token %}
                    <div class="form-group">
                        <input type="text" id="searchbox" class="form-control" placeholder="Enter a question" name="question">
                    </div>
                    {{ question_form }}
                    <button type="submit" class="btn btn-default hidden-xs">Submit</button>
                </form>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ user.first_name }}
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="/userprofile/{{ user.get_username }}/show/">Profile</a></li>
                    <li class="divider"></li>
                    <li><a href="/account/logout/">Log out</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<br>
{% block content %}
{% endblock %}
</html>

【问题讨论】：

我看到的一个错误是你有两个<nav class="navbar navbar-default"></nav>
请在Snippet 中发布您呈现的 HTML（和任何 CSS/JS）的最小工作示例。见minimal reproducible example 和How to Ask。

标签： html css django twitter-bootstrap

【解决方案1】：

如果您希望将整个导航栏放在一行中，则应将其放在 <div class="row"></div> 标记内。

【讨论】：