Выравнивание и разделение Divs с помощью поля

Question

При удалении поля из «div.in» (или при его автоматическом) он получает выравнивание, но без пробела между ними. Однако, когда я сделал «.col-lg-4: 33%» в @media, он получает возможность выровнять их, но в то же время он не отвечает в соответствии с определением следующего класса (например, «.col-md -6"). Вот код:

* { 
    box-sizing: border-box; 
} 
div.row { 
    width: 100%; 
    background-color: red; 
} 
div.in { 
    background-color: white; 
    border: 2px solid black; 
    margin-left: 2px; 
    margin-bottom: 2px; 
    float: left; 
} 
.sub { 
    margin-left: 80%; 
} 
h4 { 
    background-color: yellow; 
    padding: 15px; 
    margin-top: 0px; 
} 
@media (min-width: 1200px) { 
    .col-lg-3, 
    .col-lg-4 { 
    float: left; 
    border: 1px solid; 
    } 
    .col-lg-4 { 
    width: 33.33%; 
    } 
    .col-lg-3 { 
    width: 25%; 
    } 
} 
@media (min-width: 950px) and (max-width: 1199px) { 
    .col-md-6 { 
    float: left; 
    border: 1px solid; 
    } 
    .col-md-6 { 
    width: 50%; 
    } 
    .coll { 
    width: 100%; 
    } 
} 
@media (max-width: 949px) { 
    .col-sm { 
    float: left; 
    border: 1px solid; 
    } 
    .col-sm { 
    width: 100%; 
    } 
} 

<h1>random heading</h1> 

<div class="row out"> 
    <div class=" in col-lg-4 col-md-6 col-sm"> 
    <div class="sub"> 
     <h4>sub item 1</h4> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
    <div class=" in col-lg-4 col-md-6 col-sm"> 
    <div class="sub"> 
     <h4>sub item 2</h4> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
    <div class=" in col-lg-4 col-md-6 coll col-sm"> 
    <div class="sub"> 
     <h4>sub item 3</h4> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 

</div> 

Answer 1

Попробуйте добавить загрузочный модуль в вашей HTML-страницы и только что сделал ниже изменений. После добавления этого плагина вам не нужно писать отзывчивый медиа-код col или sm-md.

<h1>random heading</h1> 

    <div class="row out"> 
<div class=" in col-sm-4"> 
     <div class="sub"> 
      <h4>sub item 1</h4> 
     </div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
    </div> 
    <div class=" in col-sm-4"> 
     <div class="sub"> 
      <h4>sub item 2</h4> 
     </div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
</div> 
<div class=" in col-sm-4"> 
     <div class="sub"> 
      <h4>sub item 3</h4> 
     </div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
</div> 
<div class="clearfix"></div> 
</div>