bootstrap 4 导航栏项目延伸过去

Question

使用 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>

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 修复侧边导航？

Answer 1

我建议使用 div.imput-group 这可能会增强样式。检查 Bootstrap 输入组 component reference 以及 class.

的更多详细信息

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

Answer 2

您始终可以解决 bootstrap，方法是给它一个自定义（非 bootstrap class）并在 css 达到大小时使用媒体查询这导致了问题。

bootstrap 4 导航栏项目延伸过去

bootstrap4 nav bar item extending past

html

django-bootstrap4