在相同的行长中调整bootstrap 12网格

时间:2018-09-24 05:54:46

标签: html css twitter-bootstrap

美好的一天,我的目标是对齐所有图像并在我的12网格引导栏中进行测试。我将其分为6、4和2,但2列中的图标与其他列的长度不匹配。我有当前图像和打算创建的布局。

enter image description here enter image description here

          <div class="container-full col-md-12">
            <div class="row">
              <div class="col-md-6">
                <img src="img/pic1.jpg" class="display_img">
              </div>
              <div class="col-md-4">
                <h1 class="text-center">A Wealth of Deals for Wellness</h1>
              </div>
              <div class="col-md-2">
                <img src="img/link_beauty.png">
                <img src="img/link_health.png">
                <img src="img/link_wellness.png">
                <img src="img/link_partners.png">
              </div>
            </div>
          </div>

1 个答案:

答案 0 :(得分:2)

您可以将class="img-responsive"类添加到<img>标签中,以创建响应式图像。请查看下面的更新代码:

<div class="container-full col-md-12">
   <div class="row">
      <div class="col-md-6">
         <img src="img/pic1.jpg" class="display_img img-responsive">
      </div>
      <div class="col-md-4">
         <h1 class="text-center">A Wealth of Deals for Wellness</h1>
      </div>
      <div class="col-md-2">
         <img src="img/link_beauty.png" class="img-responsive">
         <img src="img/link_health.png" class="img-responsive">
         <img src="img/link_wellness.png" class="img-responsive">
         <img src="img/link_partners.png" class="img-responsive">
      </div>
  </div>
</div>