Question

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

<!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）应该从左边开始。 在这里，我可以使用左拉，但在实际情况中，我有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>

Answer 1

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

Answer 2

请试试这个：

＆＃13;

<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>

＆＃13;

没有固定高度对齐问题的Bootstrap网格

2 个答案: