如何为以下场景添加断点？

Question

下图是当前场景的移动视图表示-

这里，橙色部分代表第二个div（DIV 2）。 Div 3 是导航栏。我打算实现的是，在这个移动视图中，我希望 div 3 的整个宽度应该折叠成一个汉堡包的宽度，sub divs 应该排成一行，汉堡包图标应该在它旁边。像这样 -

您可以在 div 中随意使用任何东西来测试这个场景（段落、标题等）

我正在努力将 subdivs 和汉堡包排成一排。现在我正在使用 bootstrap 网格结构来放置项目。也许，我需要将第二个和第三个 div 放在一个 flexbox 中。如何在其中添加断点？

<div>
    <p>DIV1</p>
  </div>
  <div class="second-div">
    <div class="row">
      <div class="col-sm-6  justify-content-start">
        <p>sub-div1</p>
      </div>
      <div class="col-sm-6 justify-content-end">
        <p>sub-div2</p>
      </div>
    </div>
    <div class="third-div">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</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 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </div>
  </div>

有人可以帮忙吗？

Answer 1

我建议使用 CSS-Flexbox 来解决您的问题。以下示例为您提供了一个概览，以获得与您在问题中发布的结果类似的结果：

body{
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
    }
        /*for smartphone / mobile*/
        @media only screen and (max-width: 600px) {
            .wrapper{
                width: 100%;
                height: 20%;
                /*the following 3 lines make your Element behave as a flexbox element, the way it should behave and how it positions the elements inside of it*/
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
            .div1{
                display: none;
            }
            .container-subdivs{
                width: 80%;
                height: 100%;
                /*the following 3 lines make your Element behave as a flexbox element, the way it should behave and how it positions the elements inside of it*/
                display:flex;
                /*flex-flow is a combination of flex-direction and flex-wrap*/
                flex-flow: row nowrap;
                justify-content: space-between;
            }
            .subdiv1{
                width: 10%;
                height: 100%;
                background-color: orange;
            }
            .subdiv2{
                width: 15%;
                height: 100%;
                background-color: red;
            }
            .subdiv3{
                width: 15%;
                height: 100%;
                background-color: yellow;
            }
            .div3{
                height: 100%;
                width: 15%;
                background-color: pink;
            }
        
        }
        /* for normal desktop, tablet etc.*/
        @media only screen and (min-width: 601px) {
        
            .wrapper{
                width: 100%;
                height: 100%;
            }
            .div1{
                width: 100%;
                height: 2%;
                background-color: purple;
            }
            .container-subdivs{
                width: 100%;
                height: 20%;
                /*See above comments*/
                display:flex;
                flex-flow: row wrap;
            }
            .subdiv1{
                width: 80%;
                height: 60%;
                background-color: orange;
            }
            .subdiv2{
                width: 20%;
                height: 60%;
                background-color: red;
            }
            .subdiv3{
                width: 100%;
                height: 40%;
                background-color: yellow;
            }
            .div3{
                margin-top: 4vh;
                height: 20%;
                width: 100%;
                background-color: pink;
            }
        }

<div class="wrapper">
    <div class="div1">
            div1
    </div>
    <div class="container-subdivs">
        <div class="subdiv1">
            subdiv1
        </div>
        <div class="subdiv2">
            subdiv2
        </div>
        <div class="subdiv3">
            subdiv3
        </div>
    </div>
    <div class="div3">
        div3
    </div>
 </div>

这里的关键是如何设置 flex-direction 和 flex-wrap 行为，你还需要足够的元素来包裹其他几个元素，使它们以相同的方式表现。要找到您的最终解决方案，您需要为您的 hamburger-menu 添加一些元素和 css，您将能够自己解决这个问题。

检查 THIS 以了解此处发生的情况以及如何最终确定该方法。祝你好运，不要害怕在评论中提出其他问题。

Answer 2

嗯。你必须改用 css3 网格。使用 CSS3 AND MEDIA QUERIES 开发这样的布局。

checkout the code here

.item1 { grid-area: header; }
.item2 { grid-area: menu; }

.item4 { grid-area: right; }
.item5 { grid-area: footer; }

/* On screens that are 992px or less, set the background color to blue */
@media screen and (min-width: 600px) {
  body {
    background-color: blue;
  }

  .grid-container {
    display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "right right header header . . . menu menu menu footer footer";
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
  .grid-container {
    display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "right right right right right right header header header header header header"
      "menu menu menu menu menu menu menu menu menu menu menu menu"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

如何为以下场景添加断点？

How to add break points for the following scenario?

html

css

media-queries