Html 如何使用引导使列不相互依赖？

左边有一个菜单，具有手风琴的效果，右边的内容由一个金甲组成。我需要这样做，使菜单的高度和内容不相互依赖。 如下：

HTML:

品牌
{品牌中品牌的百分比%}
{{brand.brand_name}
{%endfor%}
{%用于智能手机中的sm%}
{{sm.brand}{{sm.model}}
{sm.description}
{{sm.price}}$
{%endfor%}

实现这一点的常用方法是嵌套。嵌套必须始终使用行-列对来完成，即决不能将一列直接嵌套在另一列中

因此，在您的例子中，首先创建一个类为

col-md-9

的列，然后在该列中放入

.row

，然后将所有内容列放入新创建的行中

请注意，在这个新创建的行中，您现在总共有12个列单元要处理

单击下面的“运行代码段”并展开到测试的完整页面：

品牌：
品牌名称
品牌模式

描述

$1,000
品牌模式

描述

$1,000
品牌模式

描述

$1,000

您正在使用哪个版本的引导？@WebDevBooster 4

<!-- menu -->
  <div class="col-md-3">
    <div class="wrapper">
      <h1 class="header-tabs">Brands</h1>
      <div class="tab">
        {% for brand in brands %}
          <button value="{{ brand.id }}">{{ brand.brand_name }
          </button>
        {% endfor %}
      </div>
    </div>
  </div>

 <!-- content -->
{% for sm in smartphones %}
    <div class="col-md-2">
      <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">
    </div>
    <div class="col-md-5">
      <h3 class="header-phone">{{ sm.brand }} {{ sm.model }}</h3>
      <p descr-phone>{{ sm.description }}</p>
    </div>
    <div class="col-md-2">
      <h4 class="price">{{ sm.price }}$</h4>
      <input type="button" class="button-buy" value="Buy">
    </div>
{% endfor %}