0
未固定每一行的高度，如何設置每個下一行元素的正確對齊方式。 這是從基本引導示例中獲取的代碼。無固定高度對齊問題的自舉網格
<!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/ 輸出小提琴臨客是 
我想要的第三個元素（藍色格）應該從左邊開始。 在這裏，我可以使用左拉，但在實際情況下，我有一個行中的6個元素，這是通過Web服務填充，每個元素可以有動態高度。
另外，我不能將行中的元素放在div下面並給出一些margin-bottom，因爲這會修復一行中元素的數量，並且當屏幕大小發生變化時，下一行的元素將從新行開始下一行的元素將不會在前一個元素中容納。
爲了清楚理解我的問題，我在編輯我的問題。
這是此更新的代碼https://jsfiddle.net/0zevgop4/3/
這裏，對於大屏幕，字段4字段2之後總是小提琴，作爲字段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>
我不想使用類= 「行」，請參閱我的更新問題。 –