Bootstrap 调整大小时堆叠水平元素

Question

我是 bootstrap 新手。我需要在较小的屏幕上垂直堆叠 div 中的两个元素。我希望“添加项目”在较小的屏幕上堆叠在“活动项目”文本下。

我想我可以通过专栏来完成此操作，但我记得过去曾看到过另一种方法。有没有更好的方法来实现这个。

html:

{% block content %}
  <div class="section-container container">
   <div class="general-section-header">
     <div class="header-add-new">
       <a class="btn btn-success" href="{% url 'add_project' %}" role="button">Add Project</a>
     </div>
     <h1>Active Projects</h1> 
  </div>
  
   {% for post in object_list %}
    {% if post.status == "active" %}
     <div class ="projects-entry">
      <div class="col-sm-8">
       <div class="row-sm-6">
        <div class="card mb-2">
          <div class="card-body">
            <div class="card-title"><a href="{% url 'project_detail' post.pk %}">{{ post.title }}</a></div>
            <div class="card-text">{{ post.description | safe | truncatewords:"20"|linebreaks }}
            <a href="{% url 'project_detail' post.pk %}">read more</a></div>
         </div>
       </div>
      </div>
      </div>
     </div>
     {% endif %}
   {% endfor %}

  </div>
  {% endblock content %}

相关CSS：

.general-section-header {
    text-align: center;
    padding-bottom: 1.5rem;

}

.header-add-new {
    position: absolute;
    left: 9rem;
}

Answer 1

您可以使用 flex-box 来实现这一点。请尝试此代码

@media (max-width: 768px){
    .general-section-header {
        display: flex;
        flex-direction: column;
    }

    .header-add-new {
        order: 1;
        position: unset;
        left: unset;
    }
}

Bootstrap 调整大小时堆叠水平元素

Bootstrap stacking horizontal elements when resizing

css

bootstrap-4