Question

我正在使用引导代码，我需要在其容器内等间隔放置多行。

.myContainer{
    background-color: lightblue;
    height: 200px;
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container myContainer">
  <div class="row">
    <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div>
    <div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div>
    <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div>
  </div>
  <div class="row" style="background-color:lightcyan;">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
  </div>
</div>

这是一个示例html代码。我希望行div在容器高度变化时垂直等间距。每行都有多个列，用于保存实际数据字段。

您可以在代码段中看到容器本身高200像素。我想在容器上平均分隔行。如果容器改变其高度，间距应该改变。

有什么建议吗？

Answer 1

只需检查此代码，看看这是否是您需要的

 <style>
        .myContainer {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            background-color: lightblue;
            height: 200px;
        }

        .row-flex {
            width: 100%;
        }

    </style>

</head>

<body>

    <div class="container myContainer">
        <div class="row row-flex">
            <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div>
            <div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div>
        </div>
        <div class="row row-flex">
            <div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div>
            <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div>
        </div>
        <div class="row row-flex" style="background-color:lightcyan;">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</body>

在父级内等间距的Bootstrap行

1 个答案: