Как добавить точки останова для следующего сценария?

Question

Ниже изображено мобильное представление текущего сценария -

Here, Orange part represents second div ( DIV 2). Div 3 is a navbar. What I intend to achieve is that in this mobile view, I want that the entire width of div 3 should collapse to the width of a hamburger, sub divs should come in one line and the hamburger icon should come next to it. Something like this -

<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

хорошо. вместо этого вам нужно использовать сетку css3. используйте CSS3 И ЗАПРОСЫ МЕДИА для разработки подобного макета.

проверьте код здесь

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

Answer 2

Я рекомендую использовать 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, также вам нужно достаточно элементов, чтобы обернуть несколько других элементов, чтобы они вели себя в так же. Чтобы найти окончательное решение, вам нужно добавить несколько элементов и css для вашего гамбургер-меню, вы сами сможете это выяснить.

проверьте ЭТО , чтобы понять, что здесь происходит и как доработать подход. Удачи и не бойтесь задавать дополнительные вопросы в комментариях.