Html 使用引导列折叠空白

首先，这里是我正在谈论的问题的截图：

我试图使空白消失。例如，我希望第四条注释（“注释”）位于第一条注释下方，而不是跳过该列并位于第二列

基本上，我想要这些引导井中的3列，它们不关心其他列注释的高度。我尝试过使用clearfix，但我不知道在这种情况下这是否正确（而且无论如何我都无法让它工作）

代码如下：

<div class="container">  
  <div class="row comment-container">
    <div class="col-sm-4" ng-repeat="comment in comments">              
      <div class="well">
        <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
        {{comment.text}}
        <br>
        <br>
        <p class='text-right'>-{{comment.name}}</p>
      </div>
    </div>
  </div>
  <div class="row">
      <form class="comment-form col-sm-8">
        <label>Leave your comment here!</label>
        <p class="form-group">
          <input type="text" class="comment-input form-control" placeholder="Your name" ng-model="newComment.name" ng-hide="isLoggedIn()">
          <input type="text" class="comment-input form-control" placeholder="Your comment" ng-model="newComment.text">
          <button type="submit" class="btn btn-primary comment-button" ng-click="addComment()">Comment</button>
        </p>
      </form>
  </div>


</div>

&时代；
{{comment.text}




-{{comment.name}
在这里留下你的评论！

评论

下面是我希望它看起来像什么的屏幕截图（这个例子说明了不计算注释高度的问题，并在crazymatt代码的修改版本上使用简单的%3比较

这是通过以下方式生成的：

<div class="comment-container">
      <div class="col-md-4">            
        <div class="well" ng-repeat="comment in comments" ng-if="($index) % 3 === 0">
            <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
          {{comment.text}}
          <br>
          <br>
          <p class='text-right'>-{{comment.name}}</p>
        </div>
      </div>
      <div class="col-md-4">            
        <div class="well" ng-repeat="comment in comments" ng-if="($index) % 3 === 1">
          <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
          {{comment.text}}
          <br>
          <br>
          <p class='text-right'>-{{comment.name}}</p>
        </div>
      </div>
      <div class="col-md-4">            
        <div class="well" ng-repeat="comment in comments" ng-if="($index) % 3 === 2">
          <span><button type="button" class="close" ng-click="deleteComment(comment)" ng-show="isAdmin()">&times;</button></span>
          {{comment.text}}
          <br>
          <br>
          <p class='text-right'>-{{comment.name}}</p>
        </div>
      </div>
  </div>

&时代；
{{comment.text}




-{{comment.name}
&时代；
{{comment.text}




-{{comment.name}
&时代；
{{comment.text}




-{{comment.name}

基于您提供的少量代码，我认为您的引导行和引导列可能混淆了。对于引导中的三列布局，您需要使用如下方法

<div class="comment-container">
    <div class="row">
        <div class="col-sm-4" ng-repeat="comment in comments">
          First comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Second comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Third comment data goes here...
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4" ng-repeat="comment in comments">
          Forth comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Fifth comment data goes here...
        </div>
        <div class="col-sm-4" ng-repeat="comment in comments">
          Sixth comment data goes here...
        </div>
    </div>
</div>

第一条评论数据在这里。。。
第二条评论数据在这里。。。
第三条评论数据在这里。。。
第四条评论数据在这里。。。
第五条评论数据在这里。。。
第六条评论数据在这里。。。

---

您可以阅读网站上的文档和示例。

您必须使用

clearfix visible xx

，其中“xx”是根据Bootstrap 3的视口大小。根据您的屏幕截图，您需要在每第三列后面放置

元素。请注意

'-xx'

可以是

'-xs'

或

'-sm'

或

'-md'

基于您希望它们修复的断点

下面是一个带有示例和说明的链接：

---

好的，虽然通常的方法是为您的col-..设置一个

min height

，但这种方法需要对高度有一些了解。另一种方法涉及使用jQuery或使用jQuery获取度量值。但这里有一些我一直在为适合您情况的引导模板工作的东西，比如glove:}

<div class="container-fluid">
<div class="row myComments">

  <div class="col-md-4">1</div>
  <div class="col-md-4">2</div>
  <div class="col-md-4">3</div>
  <div class="col-md-4">4</div>
  <div class="col-md-4">askljdsahj kasjdka sdkjasd klasjd adjalk jdklajsdklasjd klajsdkajsd jakljdsklasjd asjfkajslf vcsjdhfjs cbsjkghda bcsahdfga schjsagfhj acjgahjsgfdhja scjhgashjgf jahcjhgashjgfda hjsgj hagshjdga </div>
  <div class="col-md-4">6</div>
  <div class="col-md-4">7</div>
  <div class="col-md-4">8</div>
  <div class="col-md-4">9</div>

  </div>
</div>

---

你可以使用

这不是你的代码，这是从yeoman代码生成器修改而来的。因此，不，我不是从头开始创建所有代码。我不确定这是否相关……我的意思是这不是你图像中该部分的代码，因此我必须重新创建它，这就是为什么它相关，这是som的代码这与问题和您的图像完全无关啊，很抱歉误解。表单当然不是显示代码的一部分，但却是列定义的开始。将此与ng repeat和ng if结合起来，这是一个完整的解决方案。我认为这是最接近我想要做的，尽管我不知道我很喜欢在我的注释列表上重复3次的想法（尽管实际上这对于运行时来说并不重要）。我基于MBielski建议的代码版本发布在顶部。这是一个很好的解决方案，但不幸的是不是我的意思。这不会折叠列，但会将它们对齐，并将3个对象强制放入每行，这肯定是一个改进。进一步考虑，这似乎是实现我想要的操作的唯一方法，涉及com放置高度以平衡3列。不，3列不是我的代码给出的，而是您的md-4，这是引导行为。此代码所做的是为所有框提供相同的高度，并且能够根据响应行为以不同的方式作出反应。调整窗口大小，您将看到抱歉，我认为我遇到了困难ime向您传达了我的意思。我希望的最终结果是这样的图像：！然后，正如我前面提到的，您需要砖石结构。或者，如果您只需要CSS，请使用不同的方法尝试此新的Bootply，这意味着该部分不再使用Bootstrap列（这也不是什么大问题）。

.myComments{display: -webkit-flex;
   display: flex;   
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
  }
.col-md-4{ padding:10px; min-height:100%; width:33.3%;}