bootstrap4导航栏项目延伸到

时间：2019-10-02 20:37:07

标签： html django-bootstrap4

使用bootstrap4时，顶部导航栏会正确显示，但是当我减小屏幕尺寸时，搜索栏会延伸过去。

Navigation.html 

{% load static %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#" class="navbar-brand"><img src="{% static "polls/images/background.gif" %}"> Lorem Ipsum</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">User</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Products</a>
                </li>
            </ul>
        </div>        
    </nav>

enter image description here

Blog.html 

        <div class="row content">
          <div class="col-sm-3 sidenav">

            <ul class="nav flex-column nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>           

            <form class="form-inline md-form mr-auto mb-4">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <span class="fas">&#xf002;</span>

            </form>

          </div>

          <div class="col-sm-9">
                <h4><small>RECENT POSTS</small></h4>
                <hr>
                <h2>I Love Food</h2>
                <h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5>
                <h5><span class="badge badge-danger">Food</span> <span class="badge badge-primary">Ipsum</span></h5><br>
                <p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <br><br>

                <h4><small>RECENT POSTS</small></h4>
                <hr>
                <h2>Officially Blogging</h2>
                <h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5>
                <h5><span class="badge badge-success">Lorem</span></h5><br>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <hr>

                <h4>Leave a Comment:</h4>
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control" rows="3" required></textarea>
                  </div>
                  <button type="submit" class="btn btn-success">Submit</button>
                </form>
                <br><br>

                <p><span class="badge">2</span> Comments:</p><br>

                <div class="row">
                  <div class="col-sm-2 text-center">
                    <img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar">
                  </div>
                  <div class="col-sm-10">
                    <h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4>
                    <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <br>
                  </div>
                  <div class="col-sm-2 text-center">
                    <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
                  </div>
                  <div class="col-sm-10">
                    <h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4>
                    <p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <br>
                    <p><span class="badge">1</span> Comment:</p><br>
                    <div class="row">
                      <div class="col-sm-2 text-center">
                        <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
                      </div>
                      <div class="col-xs-10">
                        <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4>
                        <p>Me too! WOW!</p>
                        <br>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

        </div>



</div>

如果我使用bootstrap3，则该示例有效，但顶部导航栏未正确显示在页面顶部。 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_blog&stacked=h

Index.html 

{% extends 'polls/base.html'%}
{% load static %}

{%block content%}
{% include "polls/blog.html" %}
{%endblock%}

{% block footer %}
{% include "polls/footer.html" %}
{% endblock %}

Base.html 

    {% load static %}

    <!DOCTYPE html>

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <title>The HTML5 Herald</title>
      <meta name="description" content="The HTML5 Herald">
      <meta name="author" content="SitePoint">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>

  <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

      <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
    </head>

    <body>

        {% block navblock %}
        {% include "polls\navigation.html" %}
        {% endblock %}

        {% block content %}
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
            </div>
        </div>
        {% endblock %}

        {% block footer %}
        {% include "polls\footer.html" %}
        {% endblock %}

        <div class="container my-4">

                <p class="font-weight-bold">Bootstrap cookie consent is a simple, not-invasive popup which displays information about cookies and privacy policy.</p>

                <p><strong>Detailed documentation and more examples you can find in our <a href="https://mdbootstrap.com/docs/jquery/modals/basic/"
                                                                                           target="_blank">Bootstrap Modals Docs</a> </p>

                <hr>

                <p class="font-weight-bold">Basic example</p>

              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCookie1">Launch modal</button>

                  <!--Modal: modalCookie-->
                  <div class="modal fade top" id="modalCookie1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                    aria-hidden="true" data-backdrop="true">
                    <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
                      <!--Content-->
                      <div class="modal-content">
                        <!--Body-->
                        <div class="modal-body">
                          <div class="row d-flex justify-content-center align-items-center">

                            <p class="pt-3 pr-2">We use cookies to improve your website experience</p>

                            <a type="button" class="btn btn-primary">Learn more
                              <i class="fas fa-book ml-1"></i>
                            </a>
                            <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Ok, thanks</a>
                          </div>
                        </div>
                      </div>
                      <!--/.Content-->
                    </div>
                  </div>
                  <!--Modal: modalCookie-->
              </div>

              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    </body>


    </html>

我需要怎么做才能使用bootstrap4修复侧面导航？

enter image description here

2 个答案:

答案 0 :(得分：1)

我建议使用div.imput-group，这可能会使样式更有趣。检查Bootstrap输入组component reference，以获取有关该类的更多详细信息。

 <div class="input-group">
    <input type="text" class="form-control" placeholder="Search this blog">
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>

答案 1 :(得分：0)

您始终可以通过以下方式解决引导程序：为其提供自定义（非引导类），并在CSS遇到引起问题的大小时在CSS中使用媒体查询。

相关问题
最新问题