如何使用 Bootstrap 使列不相互依赖？

Question

左边有一个手风琴效果的菜单，右边的内容是用神社组成的。我需要这样做，以使菜单的高度和内容不相互依赖。 如这里：click

HTML：

<!-- 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 %}

Answer 1

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

因此，在您的情况下，您首先需要创建一个带有 col-md-9 类的列，然后在该列中放置一个 .row，然后将所有内容列放在新创建的行中。

请注意，在这个新创建的行中，您现在共有 12 个列单元可供使用。

点击下方“运行代码sn-p”，展开整页进行测试：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <!-- 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 }-->
                       Brand Name
                    </button>
<!--                    {% endfor %}-->
                </div>
            </div>
        </div>

        <!-- content -->
        <div class="col-md-9">
            <div class="row">
                <!--        {% for sm in smartphones %}-->
                <div class="col-md-3 mb-3">
                    <!--            <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
                    <img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
                </div>
                <div class="col-md-6">
                    <h3 class="header-phone">
                        <!--            {{ sm.brand }} {{ sm.model }}-->
                        Brand Model
                    </h3>
                    <p descr-phone>
                        <!--            {{ sm.description }}-->
                        Description
                    </p>
                </div>
                <div class="col-md-3 mb-3">
                    <h4 class="price">
                        <!--            {{ sm.price }}$-->
                        $1,000
                    </h4>
                    <input type="button" class="button-buy" value="Buy">
                </div>
                <div class="col-md-3 mb-3">
                    <!--            <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
                    <img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
                </div>
                <div class="col-md-6">
                    <h3 class="header-phone">
                        <!--            {{ sm.brand }} {{ sm.model }}-->
                        Brand Model
                    </h3>
                    <p descr-phone>
                        <!--            {{ sm.description }}-->
                        Description
                    </p>
                </div>
                <div class="col-md-3 mb-3">
                    <h4 class="price">
                        <!--            {{ sm.price }}$-->
                        $1,000
                    </h4>
                    <input type="button" class="button-buy" value="Buy">
                </div>
                <div class="col-md-3 mb-3">
                    <!--            <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
                    <img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
                </div>
                <div class="col-md-6">
                    <h3 class="header-phone">
                        <!--            {{ sm.brand }} {{ sm.model }}-->
                        Brand Model
                    </h3>
                    <p descr-phone>
                        <!--            {{ sm.description }}-->
                        Description
                    </p>
                </div>
                <div class="col-md-3 mb-3">
                    <h4 class="price">
                        <!--            {{ sm.price }}$-->
                        $1,000
                    </h4>
                    <input type="button" class="button-buy" value="Buy">
                </div>
                <!--        {% endfor %}-->
            </div>
        </div>

    </div>
</div>

还要注意间距类mb-3（margin-bottom 3 个单位）的使用。

img-fluid 类使图像具有响应性。

参考：

https://getbootstrap.com/docs/4.0/layout/grid/#nesting