Question

我是bootstrap的新手。我制作了一个导航栏，但它在狭窄的视口上变形（在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>

Answer 1

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

窄视口上的Bootstrap导航栏失真

1 个答案: