bootstrap嵌套网格布局，排水沟不工作

时间：2018-06-09 14:25:13

标签： twitter-bootstrap layout nested css-grid gutter

我是新来的。也许有人可以帮助我。我主要用嵌套网格来设置引导布局的想法。不幸的是，我无法调整列之间的装订线空间，因为我需要在其余的布局中使用它。

我现在拥有的：

＆＃13;
＆＃13; 
/* remove spacing between middle columns */

.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right: 7.5px;
  padding-left: 7.5px;
}

/* remove right padding from first column */

.row.no-gutter [class*='col-']:first-child {
  padding-right: 7.5px;
}

/* remove left padding from first column */

.row.no-gutter [class*='col-']:last-child {
  padding-left: 7.5px;
}

.start-cat-grid {
  display: block;
  position: relative;
  margin-bottom: 15px;
}

.start-cat-grid:hover:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, .5);
  z-index: 1;
}

.start-cat-grid:hover:before,
.start-cat-grid .mono,
.start-cat-grid img {
  border-radius: 3px;
}

.start-cat-grid .text-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 2;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.start-cat-grid h2 {
  color: #fefefe;
  text-transform: uppercase;
  text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
  font-size: 4.0rem;
  line-height: 1.4;
}

.start-cat-grid p {
  color: #fefefe;
  text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
  max-width: 80%;
  margin: 0 auto;
  font-size: 2rem;
  line-height: 130%;
}
＆＃13; 
<!DOCTYPE html>
<html>

  <head>
    <meta name="description" content="test">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <body>
    <div class="row no-gutter">
      <div class="col-sm-5 ">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>
          <div class="align-center text-wrapper">
            <h2>1</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>
      <div class="col-sm-7">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#F8B636; height: 220px" alt="1"></div>

          <div class="align-center text-wrapper">
            <h2>2</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>
    </div>

    <div class="row no-gutter">
      <div class="col-sm-3">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#E12882;height: 220px" alt="#"></div>
          <div class="align-center text-wrapper">
            <h2>3</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>
      <div class="col-sm-3">
        <div class="row no-gutter">
          <div class="col">
            <a class="start-cat-grid" href="#">
              <div class="mono" style="background:#084F8B;height: 102.5px" alt="#"></div>
              <div class="align-center text-wrapper">
                <h2>4</h2>
                <p>sample text</p>
              </div>
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <a class="start-cat-grid" href="#">
              <div class="mono" style="background:#127836;height: 102.5px" alt="#"></div>
              <div class="align-center text-wrapper">
                <h2>5</h2>
                <p>sample text</p>
              </div>
            </a>
          </div>
        </div>
      </div>

      <div class="col-sm-6">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#8DBB2E; height: 220px" alt="6"></div>

          <div class="align-center text-wrapper">
            <h2>6</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>

    </div>

    <div class="row no-gutter">
      <div class="col-sm-4">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
          <div class="align-center text-wrapper">
            <h2>7</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>
      <div class="col-sm-5">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#AE1713; height: 220px" alt="7"></div>
          <div class="align-center text-wrapper">
            <h2>8</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>
      <div class="col-sm-3">
        <a class="start-cat-grid" href="#">
          <div class="mono" style="background:#55ddff;height: 220px" alt="8"></div>
          <div class="align-center text-wrapper">
            <h2>9</h2>
            <p>sample text</p>
          </div>
        </a>
      </div>
    </div>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

您会发现我在布局中遇到了 4 和 5 的问题。 因为排水沟不能绕这两排工作。

任何人都可以看看，并提示我可以做些什么来从第3列到第（4,5）和第4,5到第6列之间从15px获得相同的空间？

1 个答案:

答案 0 :(得分：0)

我能够通过使用“css grid”实现布局来解决我的问题。 使用css网格，可以更容易地转换相等的间隙，垂直和水平。

.startpage-css-grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(12, [col] 1fr);
  grid-template-rows: [row] 220px [row] 102.5px [row] 102.5px [row] 220px;
}

.box {
  display: block;
  position: relative;
}

.box a,
.box img {
  width: 100%;
  height: 100%;
}

.box a {
  display: inline-block;
}

.box img {
  object-fit: cover;
}

.start-cat-grid:hover:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, .5);
  z-index: 1;
}

.start-cat-grid .text-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 2;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.start-cat-grid h2 {
  color: #fefefe;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 0.825rem rgba(10, 10, 10, .8);
  font-size: 36px;
  line-height: 42px;
}

.start-cat-grid p {
  color: #fefefe;
  text-shadow: 0 0 0.3125rem rgba(10, 10, 10, .8);
  max-width: 80%;
  margin: 0 auto;
  font-size: 18px;
  line-height: 22px;
}

.b1 h2,
.c1 h2,
.c3 h2 {
  font-size: 24px;
  line-height: 30px;
}

.b1 p,
.c1 p,
.c3 p {
  font-size: 16px;
  line-height: 22px;
}

.b2 h2,
.b3 h2 {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 6px;
}

.b2 p,
.b3 p {
  font-size: 14px;
  line-height: 18px;
}


/* first row ---------------- */

.a1 {
  grid-area: a1;
  grid-column: col / span 5;
  grid-row: row;
  background: #F8B636;
}

.a2 {
  grid-area: a2;
  grid-column: col 6 / span 7;
  grid-row: row;
  background: #754494;
}


/* second row ---------------- */

.b1 {
  grid-column: col 4 / span 3;
  grid-row: row 2 / span 2;
  background: #127836;
}

.b2 {
  grid-column: col / span 3;
  grid-row: row 2;
  background: #084F8B;
}

.b3 {
  grid-column: col / span 3;
  grid-row: row 3;
  background: #E12882;
}

.b4 {
  grid-column: col 7 / span 6;
  grid-row: row 2 / span 2;
  background: #8DBB2E;
}


/* third row ---------------- */

.c1 {
  grid-column: col / span 4;
  grid-row: row 4;
  background: #AE1713;
}

.c2 {
  grid-column: col 5 / span 5;
  grid-row: row 4;
  background: #ed7800;
}

.c3 {
  grid-column: col 10 / span 3;
  grid-row: row 4;
  background: #2a6496;
}
<div class="startpage-css-grid">

  <div class="box a1">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>
  <div class="box a2">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>

  <div class="box b1">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>
  <div class="box b2">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>
  <div class="box b3">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>
  <div class="box b4">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>

  <div class="box c1">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>
  <div class="box c2">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>
  <div class="box c3">
    <a class="start-cat-grid" href="#" title="#">
      <div class="text-wrapper">
        <h2>sample title</h2>
        <p>sample slogan</p>
      </div>
    </a>
  </div>

</div>

相关问题
最新问题