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/ 출력의 바이올린 LINKE입니다 
내가 세 번째 요소 (청색 DIV가) 왼쪽에서 시작해야 할 것입니다. 여기에서는 pull-left를 사용할 수 있지만 실제 시나리오에서는 웹 서비스를 통해 채워지는 행에 6 개 요소가 있고 모든 요소에는 동적 높이가있을 수 있습니다.
또한 div 아래에 행의 요소를 넣고 여백을 줄 수는 없습니다. 행의 요소 수를 수정하고 화면 크기가 변경되면 다음 행의 요소가 새 행에서 시작됩니다 다음 행의 요소는 이전 행에 수용되지 않습니다.
제 질문에 대한 명확한 이해를 위해 제 질문을 편집하고 있습니다. 필드 2의 높이가 더으로
이
이 업데이트 된 코드 https://jsfiddle.net/0zevgop4/3/ 여기, 큰 화면에, 필드 4는 항상 필드 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>
내가, 내 업데이트 된 질문을 참조하십시오 클래스 = "행"을 사용하지 않습니다. –