代码之家 › 专栏 › 技术社区 › Oleksii Petrushynskyi

如何使用引导程序使列不相互依赖?

jinja2 bootstrap-4 twitter-bootstrap css html

2

Oleksii Petrushynskyi · 技术社区 · 7 年前

左边有一个菜单,具有手风琴的效果,右边的内容是用金甲组成的。我需要这样做,使菜单的高度和内容不相互依赖。如下所示: 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 %}

1 回复 | 直到 7 年前

1

WebDevBooster 7 年前

实现这一目标的通常方法是嵌套。嵌套必须始终使用行-列对来完成,即不要将一列直接嵌套在另一列中。

因此,在您的情况下,首先要使用类创建一列 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>

还要注意spacing类的使用 mb-3 (边距底部3个单位)。

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

参考号:

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