代码之家 › 专栏 › 技术社区 › Filip Vuskovic

Bootstrap 3.3.7 md上的列布局问题

responsive responsive-design twitter-bootstrap-3 css html

Filip Vuskovic · 技术社区 · 7 年前

这是我的引导程序网站的当前布局。不幸的是,它无法工作,因为列完全不符合md大小。

Here 是当前视图。

我的目标是将它们按md大小按2列进行分组。所以布局应该是 image+text;new column;image+text;new column;image+text

        <div class="row">
            <div class="col-lg-4 col-md-6 coko">
                <img src="images/malinica.jpg" class="img-responsive img-rounded" alt="Cokol">
                <a class="link" href="#"><div class="preko">
                <h3 class="text-center">Cakes</h3></div></a> 
            </div>
            <div class="col-lg-4 col-md-6 coko">
                <p class="text-center">In 1995, <a href="index.html">The Rolling Pin</a> 
                opened its first location on a quiet street corner in the heart of 
                Munich. From its inception, The Rolling Pin has been cherished for its 
                classic Germany baked goods, vintage decor and warm, invitig atmosphere.
                </p>
            </div>
            <div class="col-lg-4 coko col-md-6">
                <img src="images/cupcake.jpg" class="img-responsive img-rounded" alt="Coko">
                <a class="link" href="#"><div class="preko">
                <h3 class="text-center">Muffins</h3>
                </div></a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 coko col-md-6">
                <h3 class="text-center">We stand for organic</h3>
                <p class="text-center">The Rolling Pin has a whole line of organic 
                desserts and drinks that prove that eating organic can taste just as 
                delicious.</p>
            </div>
        <div class="col-lg-4 col-md-6 coko">
            <img src="images/kafa.jpg" class="img-responsive img-rounded" alt="Coko">
            <a class="link" href="#"><div class="preko">
            <h3 class="text-center">Drinks</h3>
            </div></a>
        </div>
        <div class="col-lg-4 col-md-6 coko">
            <h3 class="text-center">Pet friendly</h3>
            <p>If you have a dog or cat, this is the right place for 
            you. Except our place, we offer you a special menu for your pet.</p>
            </div>          
        </div>

2 回复 | 直到 7 年前

David Taiaroa 7 年前

看看这是否有帮助: https://codepen.io/panchroma/pen/geYeep

这样的布局有两个挑战。

首先,您希望所有元素都位于同一行中,其次,您需要允许列的高度不同。第n个子选择器和一些@媒体选择器是操纵CSS并使其工作的有效方法。

HTML -这与您的完全相同,只是有几行注释掉了,所以所有元素都在同一行中

 <div class="row">
  <div class="col-lg-4 col-md-6 coko">
    <img src="http://www.fillmurray.com/500/400" class="img-responsive img-rounded" alt="Cokol">
    <a class="link" href="#">
      <div class="preko">
        <h3 class="text-center">Cakes</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 col-md-6 coko">
    <p class="text-center">In 1995, <a href="index.html">The Rolling Pin</a> opened its first location on a quiet street corner in the heart of Munich. From its inception, The Rolling Pin has been cherished for its classic Germany baked goods, vintage decor and warm, invitig
      atmosphere.
    </p>
  </div>
  <div class="col-lg-4 coko col-md-6">
    <img src="http://www.fillmurray.com/500/200" class="img-responsive img-rounded" alt="Coko">
    <a class="link" href="#">
      <div class="preko">
        <h3 class="text-center">Muffins</h3>
      </div>
    </a>
  </div>
  <!--         </div> -->
  <!--         <div class="row"> -->
  <div class="col-lg-4 coko col-md-6">
    <h3 class="text-center">We stand for organic</h3>
    <p class="text-center">The Rolling Pin has a whole line of organic desserts and drinks that prove that eating organic can taste just as delicious.
    </p>
  </div>
  <div class="col-lg-4 col-md-6 coko">
    <img src="http://www.fillmurray.com/500/300" class="img-responsive img-rounded" alt="Coko">
    <a class="link" href="#">
      <div class="preko">
        <h3 class="text-center">Drinks</h3>
      </div>
    </a>
  </div>
  <div class="col-lg-4 col-md-6 coko">
    <h3 class="text-center">Pet friendly</h3>
    <p>If you have a dog or cat, this is the right place for you. Except our place, we offer you a special menu for your pet.</p>

  </div>
</div>

CSS -第一个媒体查询确保每三列在md视口中浮动到新行的开头。

另一个是补偿删除HTML中的第二行div

@media (max-width: 1199px) {
  .row div:nth-child(odd){
    clear:left
  }
}


@media (min-width: 1200px) {
  .row div:nth-child(3n + 4){
    clear:left
  }
}

祝你好运

Anzil khaN 7 年前

这是因为 min-height 问题添加额外的 div 和 最小高度 。

或

添加 最小高度 为您的 .coko 部门。