没有固定高度对齐问题的引导网格答案

【问题标题】：Bootstrap grid without fixed height alignment issue没有固定高度对齐问题的引导网格
【发布时间】：2016-09-27 14:14:34
【问题描述】：

如果不固定每行的高度，如何设置每个下一行元素的正确对齐方式。这是从基本引导示例中获取的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Small Grid</h1>
  <p>The following example will result in a 33.3%/66.6% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4 col-xs-6" style="background-color:yellow;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-8 col-xs-6" style="background-color:pink;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
<div class="col-sm-4 col-xs-6" style="background-color:blue;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-8 col-xs-6" style="background-color:red;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
  </div>
</div>

</body>
</html>

这里是同一https://jsfiddle.net/ujw59haf/1/ 的小提琴链接输出是

我希望第三个元素（蓝色 div）应该从左边开始。 在这里，我可以使用 pull-left，但在实际场景中，我在一行中有 6 个元素，这些元素通过 Web 服务填充，并且每个元素都可以具有动态高度。
另外，我不能将一行的元素放在 div 下并给出一些 margin-bottom ，因为这将固定一行中的元素数量，并且当屏幕大小发生变化时，下一行的元素将从新的行和元素开始下一行的将不会被容纳在前一个中。

为了清楚理解我的问题，我正在编辑我的问题。

这是更新代码https://jsfiddle.net/0zevgop4/3/的小提琴

这里，对于更大的屏幕，Field 4 总是在 Field 2 之后，因为 Field 2 的高度更高。我不想使用行类，因为这会妨碍可编辑字段结构。

这是完整的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .wordWrap{
    word-wrap: break-word;
}
  </style>
  <script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
      $scope.editFields= false;
    $scope.ChangeStructure = function(){
        if($scope.editFields)
        $scope.editFields=false;
        else
        $scope.editFields=true;

    }
});

  </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">


<div class="container-fluid">
  <h1>Small Grid</h1>



    <div class="row form-group bgColor" ng-hide="ActiveCustomer && (customerDetails.CustomerStatus != 'DUMMY' && customerDetails.CustomerStatus != 'DUMMY PENDING SETUP')">
        <div class="container">
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <div class="form-group">
                    <label for="name" class="control-label">Field 1</label>
                    <div class="wordWrap">
                        <p>ABC Testing</p>
                    </div>
                </div>

            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
                <div class="form-group">
                    <label for="name" class="control-label">Field 6</label>
                    <div>
                        <p>Field</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="!editFields">
                <div class="form-group" >
                    <label for="name" class="control-label">Field 2</label>
                    <div class="wordWrap">
                        <p>ABCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
                    </div>                

                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <div class="form-group">
                    <label for="name" class="control-label">Field 3 </label>
                    <div ng-show="!editFields">
                        <p>XYZZZZZ</p>
                    </div>
                    <div class="dataMinHeight" ng-show="editFields">
                        <input type="text" ng-model="customerDetails.PhoneNumber" data-ng-mask="###-###-####" data-on="keyup" class="form-control" maxlength="12">
                    </div>
                </div>

            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                <div class="form-group">
                    <label for="name" class="control-label">Field 4 </label>
                    <div class="wordWrap" ng-show="!editFields">
                        <p>PQRRRRRRRRRRRRRRRRRRRRRRRRR</p>
                    </div>
                    <div class="dataMinHeight" ng-show="editFields">
                        <input type="text" ng-model="customerDetails.MailAddress" class="form-control">
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="!editFields">
                <div class="form-group">
                    <label for="name" class="control-label">Field 5</label>
                    <div>
                        <p>MNOPPPPPP</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="IsAdmin">
                <div class="form-group">
                    <label for="name" class="control-label">Field 6</label>  
                    <div ng-hide="editFields">
                        <p>IIIIIIIIIIIIIIII</p>
                    </div>             

                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="IsAdmin">
                <div class="form-group">
                    <label for="name" class="control-label">Field 7 <span ng-show="editFields" style="color:orangered;">*</span></label>


                </div>
            </div>

            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
                <div class="form-group">
                    <label for="name" class="control-label">
                        Field 2 Part 1<!--<span class="star-mark">*</span>-->
                    </label>
                    <div class="dataMinHeight">
                        <p>XYYYYY</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
                <div class="form-group">
                    <label for="name" class="control-label">
                        Field 2 Part 2
                    </label>
                    <div class="dataMinHeight">
                        <p>UIZZPTTTT</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
                <div class="form-group">
                    <label for="name" class="control-label">
                        Field 2 Part 3
                    </label>
                    <div class="dataMinHeight">
                        <p>GGGGGGGGGGGG</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
                <div class="form-group">
                    <label for="name" class="control-label">
                        Field 2 Part 4 
                    </label>
                    <div class="dataMinHeight">                       
                        <p>ABCDIGHGHGH</p>                        
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-show="editFields">
                <div class="form-group">
                    <label for="name" class="control-label">
                        Field 2 Part 5
                    </label>
                    <div class="dataMinHeight">
                        <p>ERTTTYYYYYYYY</p>
                    </div>
                </div>
            </div>
        </div>
        <hr />
    </div>
  <div class="row"> 

    <button type="button"  ng-click="ChangeStructure()">
               Edit Fields
            </button>
  </div>
</div>

</body>
</html>

【问题讨论】：

标签： twitter-bootstrap-3

【解决方案1】：

我不知道我是否完全理解您想要实现的布局，但我认为您只需要添加另一个 <div class="row></div>，如下所示：https://jsfiddle.net/ujw59haf/2/。

【讨论】：

我不想使用 class="row" ，请查看我更新的问题。

【解决方案2】：

请试试这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
    <h1>Small Grid</h1>
    <p>The following example will result in a 33.3%/66.6% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
    <p>Resize the browser window to see the effect.</p>
    <div class="row">
        <div class="col-sm-4 col-xs-6" style="background-color:yellow;">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
        <div class="col-sm-8 col-xs-6" style="background-color:pink;">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
        </div>
    </div>
        <div class="row">


            <div class="col-sm-4 col-xs-6" style="background-color:blue;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>

        <div class="col-sm-8 col-xs-6" style="background-color:red;">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
        </div>
        </div>

</div>

</body>
</html>

【讨论】：

感谢您的努力，但我不想使用行类，请参阅我更新的问题。