Question

我正在尝试构建一个具有metro接口的应用程序。行像列一样堆叠，孩子们平铺。

在bootstrap中行的左边距为-15px，右边的边距相同。然后我在 .row 中添加了15px填充。然后我的专栏的边距为15px。所以，我必须让我的边缘顶部：-15px和填充顶部：我的行上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>

我已经创建了一个codepen，您可以在其中查看我的问题：

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

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

Answer 2

如果我的问题正确，您需要创建一个都市风格的UI。这是一个可能是此基础的片段。正如我在上面的评论中提到的，不要使用bootstrap行作为列。

＆＃13;

body, html {
  height: 100%;
}
.metro {
  width: 10000px;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.metro .page {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  float: left;
}

.content {
  flex: 1;
}

.content-login  {
  background-color: #f0f0f0;
}

.content-page2 {
  background-color: #e0e0e0;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="metro">

  <div class="page">
    <h1>Login</h1>
    <div class="row content content-login">
      Content
    </div>
  </div>

  <div class="page">
    <h1>Page 2</h1>
    <div class="row content content-page2">
      Content
    </div>
  </div>
  
</div>

＆＃13;

Bootstrap嵌套行边距顶部/底部

2 个答案: