Question

您好我正在尝试使用Bootstrap 4创建layout shifter pattern。

我设法在正确的位置设置了2个彩色盒子，保持了响应能力，但我无法将第3个盒子放在正确的位置。

请让我知道我该怎么做。这是我的HTML代码：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Layout Shifter</title>
  <link href="bootstrap.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <!-- navbar -->
  <nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Layout Shifter</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-12 col-md-2">
        <div class="blue"></div>
      </div>
      <div class="col-12 col-md-10">
        <div class="red"></div>
      </div>
      <div class="col-12 col-md-10">
          <div class="purple"></div>
      </div>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    crossorigin="anonymous"></script>
</body>

</html>

这是我的CSS代码：

.blue{
    width:100%;height:1100px;
    background-color:rgb(88, 88, 211);
}
.red{
    width:100%;height:550px;
    background-color:rgb(216, 90, 90);
}
.purple{
    width:100%;height:550px;
    background-color:rgb(168, 68, 214);
}
.orange{
    width:100%;height:550px;
    background-color:rgb(212, 135, 46);
}
.light-blue{
    width:100%;height:550px;
    background-color:rgb(160, 168, 238);
}
.container-fluid{
    padding:0;
}
.img-fluid{
    width:100%;
}
.bg-light{
    background-color: #384f3f !important;
}
.navbar-brand{
    color: white !important;
}
.nav-link{
    color: white !important;
}
.img-responsive{
    max-height:550px; 
    width:100%;
}
.navbar-toggler{
    color:white !important;
    border-color:white !important;
}

Answer 1

Boostrap使用12个网格列系统。您的代码中的问题是您有一个2宽度列+一个10宽度列+另一个10宽度列。前两个坐在一排（2 + 10 = 12）。第三个被推倒了。为了达到理想的效果，你需要将2行中的行分成2个宽度和10个宽度的列，然后在第二列下面插入一个新行并将那些2 10列放在那里（但要使它们成为12个宽度“col-md” -12“因此他们占用了整个空间）。这是jsfiddle +您感兴趣的代码： https://jsfiddle.net/Iulius90/t7vhza3g/1/

  <div class="container-fluid">
<div class="row no-gutters">
  <div class="col-12 col-md-2">
    <div class="blue"></div>
  </div>
  <div class="col-12 col-md-10">
    <div class="row no-gutters">
      <div class="col-12 col-md-12">
        <div class="red"></div>
      </div>
      <div class="col-12 col-md-12">
          <div class="purple"></div>
      </div>
    </div>
  </div>     
</div>

Bootstrap布局移位器模式

1 个答案: