0
Ohne Festlegung der Höhe jeder Zeile, wie kann ich die korrekte Ausrichtung jedes nächsten Zeilenelements festlegen. Hier ist der Code aus dem Bootstrap-Beispiel.Bootstrap-Raster ohne feste Höhenausrichtung Ausgabe
<!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>
Hier ist die Geige linke für den gleichen https://jsfiddle.net/ujw59haf/1/ Ausgang ist 
Ich mag, dass drittes Element (blau gefärbt div) von links beginnen soll. Hier kann ich pull-left verwenden, aber im tatsächlichen Szenario habe ich 6 Elemente über eine Zeile, die durch Web-Service gefüllt wird und jedes Element kann dynamische Höhe haben.
Außerdem kann ich nicht unter einem div Elemente einer Reihe gelegt und einig margin-bottom geben, da dies die Anzahl der Elemente in einer Reihe und fixiert, wenn die Bildschirmgröße ändern, Elemente der nächsten Reihe von einer neuen Zeile beginnen und Elemente der nächsten Zeile werden im vorherigen nicht berücksichtigt.
Aus Gründen der klaren Verständnis für meine Frage, ich bearbeite ich meine Frage.
Dies ist die Geige für diesen aktualisierten Code https://jsfiddle.net/0zevgop4/3/
hier für größere Bildschirme, Feld 4 kommt immer nach Feld 2, wie die Höhe von Feld 2 mehr ist. 
Ich möchte keine Zeilenklasse verwenden, da dies die Struktur der bearbeitbaren Felder beeinträchtigt.
Hier ist der vollständige Code.
<!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>
Ich will nicht class = "Zeile" verwenden, Bitte, meine Frage aktualisiert sehen. –