Question

左边有一个菜单，有手风琴的效果，右边的内容是用jinja形成的。我需要这样做，菜单的高度和内容不相互依赖。在这里：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个列单位可供使用。

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

<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（边距底部3个单位）。

img-fluid类使图像响应。

参考：

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

如何使用Bootstrap使列不依赖于彼此？

1 个答案: