css - Bootstrap 嵌套行边距顶部/底部

Question

我正在尝试构建一个具有 Metro 接口(interface)的应用程序。 行像列一样堆叠，子项平铺。

在 bootstrap rows 中，左边距为 -15px，右边距相同。然后我向 .row 添加了 15px 的填充。然后我的列周围有 15px 的边距。所以，我必须在我的行(以及底部)上设置 margin-top: -15px 和 padding-top: 15px 。 所有这些应该让我在每一列和每一行之间正好有 30px。问题是当我嵌套时，一切都变成了锅。

我的 CSS 看起来像这样:

.metro {
  width: 10000px;
}

.metro .row-title {
  position: absolute;
  height: 100px;
  top: -50px;
}

.metro > .row {
  position: relative;
  float: left;
  height: 630px;
  margin-top: -15px;
  margin-right: -15px;
  padding: 15px;
}

.metro > .row .row {
  padding: 0;
}

.metro > .row > .col-md-1 {
  width: 75px;
}

.metro > .row > .col-md-2 {
  width: 150px;
}

.metro > .row > .col-md-3 {
  width: 225px;
}

.metro > .row > .col-md-4 {
  width: 300px;
}

.metro > .row > .col-md-5 {
  width: 375px;
}

.metro > .row > .col-md-6 {
  width: 450px;
}

.metro > .row > .col-md-7 {
  width: 525px;
}

.metro > .row > .col-md-8 {
  width: 600px;
}

.metro > .row > .col-md-9 {
  width: 675px;
}

.metro > .row > .col-md-10 {
  width: 750px;
}

.metro > .row > .col-md-11 {
  width: 825px;
}

.metro > .row > .col-md-12 {
  width: 900px;
}

.flex {
  display: -webkit-box;
  /* Safari */

  display: flex;
  /*> div {
            -webkit-box-flex: 1;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        }*/
}

.flex.flex-wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex.flex-vertical {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.row div[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
}

[class*="col-"] > div:not(.row):not(.alert),
[class*="col-"] > a,
[class*="col-"] > form {
  display: block;
  background-color: #3C60EF;
  padding: 10px;
  height: 100%;
}

[class*="col-"] > div:not(.row):not(.alert) .form-group:last-child,
[class*="col-"] > a .form-group:last-child,
[class*="col-"] > form .form-group:last-child {
  margin-bottom: 0;
}

乱七八糟的 HTML 是这样的:

<div class="container metro">

  <div class="row">
    <div class="col-xs-12 row-title">
      <h1>Login</h1>
    </div>

    <div class="col-md-12">
      <div class="row flex flex-vertical">
        <div class="col-md-12">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
              <div class="box-shadow">
                <p>
                  Some welcome text
                </p>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div>
                    <p>Nesting</p>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div>
                        <p>Nesting</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6">
              <div class="box-shadow">
                <p>Disclaimer</p>
              </div>
            </div>
          </div>
        </div>

        <form class="col-md-12" name="loginForm" role="form">
          <div class="box-shadow">
            <div class="form-group">
              <input class="form-control" type="text" id="userName" placeholder="Enter Username" required="" ng-model="controller.user.userName">
            </div>

            <div class="form-group">
              <input class="form-control" type="password" id="password" placeholder="Enter Password" required="" ng-model="controller.user.password">
            </div>

            <div class="form-group">
              <button class="btn btn-primary" type="submit" ng-disabled="loginForm.$invalid" ng-click="controller.loginUser()">Login</button>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <div>
                <p>Another nested row</p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

我创建了一个代码笔，您可以在其中查看我的问题:

http://codepen.io/r3plica/pen/ojNVeX

有谁知道我怎样才能做到这一点？

Answer 1

I managed to do this myself

基本上，我只是从默认 Bootstrap 开始，然后反复尝试直到获得我想要的结果。

这是我更改的 CSS:

.metro > .row {
  background-color: red;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}

.metro > .row .row {
  background-color: orange;
}

.metro > .row .row .row {
  background-color: yellow;
}

.row div[class*="col-"] {
  border: 1px dashed black;
}

.row [class*="col-"] > div:not(.row),
.row [class*="col-"] > form,
.row [class*="col-"] > a {
  background-color: blue;
  padding: 15px;
  margin-top: 30px;
}

无需添加任何其他内容，这解决了我所有的问题。