Question

我有刀片视图（Laravel 5）以这种方式列出所有产品：

<div class="row">
    @foreach($products as $p)
        <div class="col-lg-4 col-md-6 col-sm-6">
            <a class="thumbnail" href="#?">
                <img src="{{ asset('img/logo.png') }}" alt=""/>
            </a>
            <h5>{{ $p->name }}</h5>
            <p>{{ $p->details }}</p>
        </div>
    @endforeach
</div>

我尝试做的是强制网格系统在桌面上每行放置3列，在平板电脑上放置2列。我听说我可以使用clearfix，但是当我在@endforeach之前添加它时，<div class="clearfix visible-lg"></div>我会得到一个＆＃39; one-column＆＃39;布局，而不是每行3列。我发现难以理解的是如何添加clearfix以强制推出新行＆＃39; （如果这确实是正确的方法）。

Answer 1

您的列很可能具有不同的高度，这对于像Bootstrap这样的网格来说是常见问题float s＆amp; clear。 Bootstrap确实有一个实用工具，但它并不总是一个很好的选择。请参阅Resets。

替代方案。

由于您的列设置了2个不同的断点，col-lg-4和col-sm-6（不需要col-md-6，因为它等于您的小类col-sm-6 ），你必须在适当的断点处清除列。

确保在实现此功能时具体，因此它不会影响您在其他地方使用的网格的任何其他部分。为每列添加通用类或使用类似下面的示例等

执行此操作的一种方法是将所需规则与媒体查询一起放在列的Pseudo类中。另请参阅MDN nth-child。

工作示例：

@media (min-width: 1200px) {
  .grid .col-lg-4:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .grid .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row grid">

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x350" alt="" />
      </a>
      <h5>ONE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/550x550" alt="" />
      </a>
      <h5>TWO</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x450" alt="" />
      </a>
      <h5>THREE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/250x500" alt="" />
      </a>
      <h5>FOUR</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>

    <div class="col-lg-4 col-sm-6">
      <a class="thumbnail" href="#">
        <img src="http://placehold.it/350x150" alt="" />
      </a>
      <h5>FIVE</h5>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </div>

  </div>
</div>

Answer 2

如果是我，我会使用一个计数行。

<?php $count = 1;
foreach( $products as $p ) 
{
    if ($count%3 == 1)
    {  
         echo "<div class='row'>";
    }?>
     <div class="col-lg-4 col-md-6 col-sm-6">
        <a class="thumbnail" href="#?">
            <img src="{{ asset('img/logo.png') }}" alt=""/>
        </a>
        <h5>{{ $p->name }}</h5>
        <p>{{ $p->details }}</p>
    </div>
    <?php if ($count%3 == 0)
    {
        echo "</div>";
    }
    $count++;
}
if ($count%3 != 1) echo "</div>";?>

Answer 3

我实际上有一个类似的问题并为它写了一些jQuery，对我来说非常合适！

使用以下html：

<div id="products">
    @foreach($products as $p)
        <div class="col-lg-4 col-md-6 col-sm-6">
            <a class="thumbnail" href="#?">
                <img src="{{ asset('img/logo.png') }}" alt=""/>
            </a>
            <h5>{{ $p->name }}</h5>
            <p>{{ $p->details }}</p>
        </div>
    @endforeach
</div>

和jQuery：

$(document).ready(function() {
    $(window).resize(function() {
        var width = window.outerWidth;
        var items = $('div#products > div');

        if(width <= 767) {
            console.log('extra small loop (mobile)');
            $('div#products .row').contents().unwrap();
        } else if (width >= 768 && width <= 991 ){
            console.log('small loop (tablet)');
            $('div#products .row').contents().unwrap();
            for (var i = 0; i < items.length; i += 2) {
                var div = $("<div/>", {
                    class: 'row'
                });
                items.slice(i, i + 2).wrapAll(div);
            }
        } else { // greater than 991 
            console.log('medium loop (desktop)');
            $('div#products .row').contents().unwrap();
            for (var i = 0; i < items.length; i += 3) {
                var div = $("<div/>", {
                    class: 'row'
                });
                items.slice(i, i + 3).wrapAll(div);
            }
        }
    }).resize();
});

它在桌面大小上抓取3列并将它们排成一行，当更改为平板电脑大小时，它会分解这些行并抓住2列并将它们放在一行中。最后，对于移动设备，它将再次打破行并显示堆叠的所有项目。

希望这有帮助！

Answer 4

<div class="col-lg-4 col-md-6">

它应该有效，也许你的img太大了，试试这个：

<img class="img-responsive" src="{{ asset('img/logo.png') }}" alt=""/>

Answer 5

我认为更合适的方法是进入css文件并根据屏幕宽度更改宽度

每3列Bootstrap clearfix

5 个答案: