Question

我希望我的主要内容和Sidewidget在同一行。凭借我对bootstrap网格的了解，我尝试了这项工作，但是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.html

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

我的{％block content％}

{% for post in posts %}
      <h2 class="mt-4">{{post.title}}</h2>
      <!-- Author -->
      <p class="lead">
        by
        <a href="/author/{{post.author}}">{{post.author}}</a>
      </p>
      <hr>
      <!-- Date/Time -->
      <p class="lead">Published on <b>{{post.published_date}}</b></p>
      <hr>
      <!-- Preview Image -->
      <img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
      <p>{{post.images}}</p>

      {% for tag in post.tags.all %}
      <p>{{tag.name}}</p>
      {% endfor %}
      <hr>
      <!-- Post Content -->
      <p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
      <footer class="entry-footer">
        <a href="{{post.slug}}" class="btn-readmore"><button class="btn btn-primary">Read More</button></a>
      </footer>
      <hr>
{% empty %}
       <h1> Nothing to display</h1>
{% endfor %}  
{% endblock %}

我的{％Sidewidget％}阻止

  <!-- Search Widget -->
  <div class="card my-4">
    <h5 class="card-header">Search</h5>
    <div class="card-body">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">Go!</button>
        </span>
      </div>
    </div>
  </div>

  <!-- Categories Widget -->
  <div class="card my-4">
    <h5 class="card-header">Categories</h5>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-6">
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#">Web Design</a>
            </li>
            <li>
              <a href="#">HTML</a>
            </li>
            <li>  
              <a href="#">Freebies</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-6">
          <ul class="list-unstyled mb-0">
            <li>
              <a href="#">JavaScript</a>
            </li>
            <li>
              <a href="#">CSS</a>
            </li>
            <li>
              <a href="#">Tutorials</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Side Widget -->
  <div class="card my-4">
    <h5 class="card-header">Side Widget</h5>
    <div class="card-body">
      You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
    </div>
  </div>
{% endblock %}

我尝试过调整但似乎没有任何效果

我想要这样的页面：

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

Answer 1

您的代码应该有效。根据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>

Answer 2

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

Answer 3

在＆＃39; nav＆＃39;导航＆＃39;导航＆＃39;标签未关闭</nav>。关闭它然后再试一次我认为这将解决您的问题。

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

Bootstrap Grid没有按预期工作

3 个答案: