Django 引导网格不'；I don’我没有按预期工作

我希望我的主要内容和Sidewidget在同一行中。根据我对引导网格的了解，我试图实现这一点，但sidewidget堆积在内容下方，而不是侧面。以下是所需的代码片段

body.html

<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
  <div class="row">
    <div class="col-lg-8 ">
      {% block content %}
      {% endblock %}
    </div>
    <div class="col-lg-4">
       {% block sidewidget %}
       {% endblock %}
    </div>
  </div>
</div>

<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'add' %}">Add Article</a>
          </li>  
        {% endif %}
      </ul>
    </div>
  </div>

---

你的代码应该可以工作。根据bootstrap的文档，

col lg-*

修改器仅适用于宽度超过1200px的屏幕。可能您正在使用较小的屏幕，并且还需要添加

col sm

和

col md

修饰符。请试试这些，让我知道它是否有效

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-lg-8 ">
      {% block content %}
      {% endblock %}
    </div>
    <div class="col-sm-4 col-lg-4">
       {% block sidewidget %}
       {% endblock %}
    </div>
  </div>
</div>

{%block content%}
{%endblock%}
{%block sidewidget%}
{%endblock%}

您不能对其使用bootstarp网格系统，因为sidewidget将占据整个三行的列。您必须对其使用flex box。通过使用网格系统，可以在不同的行中单独使用列，但不能在不同的行上使用整个列

在“导航”部分，“导航”标签未关闭

。关闭它并重试。
我想这会解决你的问题

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'add' %}">Add Article</a>
          </li>  
        {% endif %}
      </ul>
    </div>
  </div>
</nav>

{%if user.u经过身份验证%}


{%endif%}

在您的情况下，sidewidget将只占用第一行的列，而不是所有行中的所有列。OP要求将它跨越跨越跨越所有行的所有第二列。如果你看他的代码的其余部分，他没有在其他地方添加更多的行。已经有三行了，他想跨越小部件访问第二列中的所有三行查看图片，否则问题会非常简单Hi martin，我已经尝试了你提到的，似乎不起作用Hi，我可能无法解释，我希望我的side widget位于右边的col-8到col-12之间。在网格中这是不可能的，但您必须使用FlexHil为其使用自定义cs和html，我会尝试你所说的。我无法提供我尝试过的完整代码，但如果你喜欢答案，你最多可以投票，因为它没有为你提供完整的解决方案，所以不要求绿色勾选。它说声誉低于15的用户的投票会被记录，但不会显示在公共平台上。所以是的，我对你的答案投了赞成票。

|*****************************|  
|navigationbar                | 
|*****************************|
|Post1(Col1-Col8)  |SIDEWIDGET| 
|*****             |          |
|Post2(Col1-Col8)  |          |
|*****             |          |
|PostN(Col1-Col8)  |          |
|*****************************|
|Footer                       |

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-lg-8 ">
      {% block content %}
      {% endblock %}
    </div>
    <div class="col-sm-4 col-lg-4">
       {% block sidewidget %}
       {% endblock %}
    </div>
  </div>
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'add' %}">Add Article</a>
          </li>  
        {% endif %}
      </ul>
    </div>
  </div>
</nav>