Question

我正在搜索将屏幕分为3个部分

在宽屏上：

在小屏幕上：

关于如何实现这一目标的任何想法？我猜想Flexbox和网格系统是结合在一起的，但是我无法弄清楚。

编辑：我只是使用行和列进行了一次尝试，但是我不确定这是理想的解决方案

#left {
  height: 600px;
}

#righttop {
  height: 300px;
}

#rightbottom {
  height: 300px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/style.css" />

    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 bg-success" id="left">
          left part
        </div>
        <div class="col-md-6">
          <div class="row bg-primary" id="righttop">first part right</div>
          <div class="row bg-warning" id="rightbottom">first part left</div>
        </div>
      </div>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Answer 1

三种图像组合

html,
body {
  height: 100%;
  width: 100%;
}

h1 {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
}

.img_container {
  width: 70vw;
  height: 80vh;
  margin: 20px auto;
  display: flex;
}

.main-img {
  width: 50%;
  height: 100%;
  margin-right: 10px;
  background-color: orange;
}

@media (max-width: 991px) {
  .main-img {
    width: 100%;
    height: 100%;
  }
}

.stacked-div {
  width: 50%;
  height: 100%;
}

@media (max-width: 991px) {
  .stacked-div {
    width: 100%;
    height: 100%;
  }
}

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all .4s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-img:hover .overlay,
.top-img:hover .overlay,
.bottom-img:hover .overlay {
  opacity: 1;
}

.top-img,
.bottom-img {
  width: 100%;
  height: calc(50% - 5px);
  background-color: orangered;
}

.top-img {
  margin-bottom: 10px;
}

<div class="img_container">
  <!-- top level image container START-->
  <div class="main-img">
    <!--Main image -->
    <div class="overlay">
      <!--overlay div -->
      <h1>Hello!</h1>
    </div>
  </div>


  <div class="stacked-div">
    <!--stacked img container -->
    <div class="top-img">
      <!--top image -->
      <div class="overlay">
        <h1>hello!</h1>
      </div>
      <!--overlay -->
    </div>
    <div class="bottom-img">
      <!--bottom image -->
      <div class="overlay">
        <h1>hello!</h1>
      </div>
      <!--overlay -->
    </div>
  </div>

Answer 2

Bootstrap 4的方式是使用flexbox实用程序类...

<div class="container">
    <div class="row">
        <div class="col-md-6 bg-success min-vh-100" id="left">
            left part
        </div>
        <div class="col-md-6 d-flex flex-column">
            <div class="row flex-grow-1">
                <div class="col-md-12 bg-primary min-vh-100 min-vh-md-50" id="righttop">first part right</div>
                <div class="col-md-12 bg-warning min-vh-100 min-vh-md-50" id="rightbottom">first part left</div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/vbWvESRSXP

然后，您只需要一点额外的CSS，即可在md上将正确的列高度提高1/2或更宽。.

@media (min-width: 768px) {
    .min-vh-md-50 {
        min-height: 50% !important;   
    }
}

Answer 3

是的，您必须将Grid System与断点，行和列一起使用，请阅读官方文档。

如果您仍在寻找答案，请参阅此。

<div class="row">
<div class="col-md">First col md</div>
<div class="col-md">
  <div class="row">
    <div class="col-12">Second col xs</div>
    <div class="col-12">Third col xs</div>
  </div>
</div>

遵循link。

屏幕在Bootstrap 4上一分为三

3 个答案: