Выровняйте 4 деления по 2 на строку при меньшей ширине области просмотра

Question

У меня 4 div s выровнены по горизонтали слева направо. Каждый div составляет 25% ширины экрана.

Мне нужно сделать так, чтобы они были перенесены, когда пользователь сворачивает экран, а не глюкает друг над другом.

.MenuSett {
  margin-top: 10px;
  width: 100%;
  position: relative;
  height: 120px;
  color: #0ddF00;
  display: inline-block;
}

.m1 {
  width: 25%;
  margin: auto;
  text-align: center;
  float: left;
}

<div class="MenuSett">

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>


  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

</div>

Ниже этого div есть

.belowDiv {   
   position: relative;  
   height:350px;
 }

Как убрать sh вниз, когда div выше оборачивается ?????

Answer 1

Вы можете добавить Flexbox к .MenuSett и использовать flex-wrap: wrap, чтобы перевести его дочерние элементы в go на новую строку с меньшей шириной области просмотра.

Обратите внимание, что вам необходимо установить абсолютное значение ширины, например 250px. Это связано с тем, что при width: 25% независимо от ширины области просмотра дочерние элементы всегда будут составлять 25% от его родительского элемента, поэтому они всегда отображаются в одной строке.

.MenuSett {
  margin-top: 10px;
  width: 100%;
  position: relative;
  height: 120px;
  color: #0ddF00;
  
  /* Introduce Flexbox to parent */
  display: flex;
  
  /* Allow children to wrap to the next line */
  flex-wrap: wrap;
}

.m1 {
  /* At larger viewports, children will be 25% of parent */
  width: 25%;
  
  /* At viewports smaller than ~1000px, children will start
     wrapping because they have a minimum width set. Change
     this value as needed. */
  min-width: 250px;
  
  margin: auto;
  text-align: center;
  float: left;
}

<div class="MenuSett">

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>


  <div class="m1">
    <p>This content is ok</p>
    <div ngbDropdown class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
  </div>

</div>

Answer 2

если вы хотите, чтобы они были ниже друг друга, вы отображаете flex в родительском элементе с flex-direction: row;, а медиа-запросы изменяют направление flex на столбец flex-direction: column;

.MenuSett{  
  margin-top:10px ;
  width: 100%;
  position: relative; 
  height: 120px;  
  color: #0ddF00;
  display: flex;
  flex-direction: row; 
} 

.m1 { 
   width: 25%;   
   margin: auto;
   text-align: center;    
   float: left;
} 


@media only screen and (max-width: 600px) {
  .MenuSett{ 
    flex-direction: column; 
  }
}

Answer 3

Я бы использовал flex:

.MenuSett{  
  margin-top:10px;
  width: 100%;
  position: relative; 
  height: 120px;  
  color: #0ddF00;
  display: inline-block;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
} 

.m1 { 
   flex: 1; 
   margin: auto;
   text-align: center;    
   float: left;
} 

Родитель .MenuSett будет иметь display: flex;, flex-direction: row; & flex-wrap: wrap;, а дети .m1 будут иметь flex: 1 и без ширины set.

Но вы также можете выполнять некоторые медиа-запросы, так как при некоторой минимальной ширине экрана, имеющей 4 столбца одновременно, может быть слишком много. Как это:

@media screen and (max-width: 500px) {
  .m1 { 
   flex: 1 0 100%;
  }
}
@media screen and (min-width: 700px) {
  .m1 { 
    flex: 1 0 50%;
  }
}

@media screen and (min-width: 900px) {
  .m1 { 
    flex: 1 0 25%;
  }
}