Question

我尝试使用Bootstrap 3网格在我的网站上有一个很好的网格项目，而每个项目都有不同的高度。问题是我在项目之间得到不同的空格。请原谅我的长代码，我必须写6个项目才能显示问题。一旦你阅读了第一篇文章，你就会注意到它会重复，但由于项目描述的不同，会有不同的长度。

<div class="container"> 
    <div class="row-fluid">
        <div class="col col-sm-6 col-md-4">
            <div class="result-padder">
                <div class="box">
                    <p class="boxTitle">vendor1</p>
                    <p class="boxDescription">Description of vendor1</p>
                </div>
            </div>
        </div>
        <div class="col col-sm-6 col-md-4">
            <div class="result-padder">
                <div class="box">
                    <p class="boxTitle">vendor2</p>
                    <p class="boxDescription">Description of vendor2 which is longer and the layout takes more than one line...</p>
                </div>
            </div>
        </div>
        <div class="col col-sm-6 col-md-4">
            <div class="result-padder">
                <div class="box">
                    <p class="boxTitle">vendor3</p>
                    <p class="boxDescription">Description of vendor3</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col col-sm-6 col-md-4">
            <div class="result-padder">
                <div class="box">
                    <p class="boxTitle">vendor4</p>
                    <p class="boxDescription">Description of vendor4</p>
                </div>
            </div>
        </div>
        <div class="col col-sm-6 col-md-4">
            <div class="result-padder">
                <div class="box">
                    <p class="boxTitle">vendor5</p>
                    <p class="boxDescription">Description of vendor5</p>
                </div>
            </div>
        </div>
        <div class="col col-sm-6 col-md-4">
            <div class="result-padder">
                <div class="box">
                    <p class="boxTitle">vendor6</p>
                    <p class="boxDescription">Description of vendor6</p>
                </div>
            </div>
        </div>
   </div>
</div>

结果是第一行设置正确但第二行出错。我希望所有项目之间的空间相同，使其更加流畅。

注意：项目的高度始终在变化，因此它必须适用于所有高度。

看一下，您需要将结果窗口的大小调整为最大值以便查看问题：http://jsfiddle.net/asafusan/09egpzkj/6/

我该如何解决？我是一名编程的新手，所以请大家解释一下。

由于

Answer 1

我发生了一段时间，如果你把更少的数据放在其他的，所以它变成一些不规则的形状，为此，你必须给你的div一个固定高度，但它会导致一个问题，就是它在移动或平板电脑中与你应用的相同高度，所以为此您使用媒体查询移动版本
我宣布另一个是网格的类，并给出静态高度

Answer 2

您的代码看起来不错，我会使用可视边框来查看代码。我在这里为你创建了一个模型

[http://www.bootply.com/Pzn15AfwyA][1] 



.container {
      border: 1px solid blue;
      }

    .result-padder {
        border: 1px solid red;
        margin-bottom: 10px;
      }

    <div class="wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-lg-4">

            <div class="result-padder">
            <h1>vendor1</h1>
            <p>Description of vendor1</p>
            </div>

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

            <div class="result-padder">
            <h1>vendor1</h1>
            <p>Description of vendor1</p>
            </div>

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

            <div class="result-padder">
            <h1>vendor1</h1>
            <p>Description of vendor1</p>
            </div>

          </div>
        </div><!-- .row 1 -->
        <div class="row">
          <div class="col-md-4 col-lg-4">

            <div class="result-padder">
            <h1>vendor1</h1>
            <p>Description of vendor1</p>
            </div>

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

            <div class="result-padder">
            <h1>vendor1</h1>
            <p>Description of vendor1</p>
            </div>

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

            <div class="result-padder">
            <h1>vendor1</h1>
            <p>Description of vendor1</p>
            </div>

          </div>
        </div><!-- .row 2 -->



      </div>
    </div>


  [1]: http://www.bootply.com/Pzn15AfwyA

如何使用Bootstrap 3在不同高度的列之间设置固定空间？

2 个答案: