Колонка начальной загрузки не изменяется в зависимости от размера экрана

Question

Я создал столбец начальной загрузки на своей HTML-странице следующим образом:

<div style="background-color: #F5F5F5	">
<div  class="container">
  <div style="margin-top: 10px;" class="row">
   <div class="col-sm-6 col-md-3 col-lg-2"> <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a> <p style="font-size: 20px;">Kids</p>
</div>
    <div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Weddings</p>
</div>
<div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Other Events</p>
</div>
<div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
<p style="font-size: 20px;">Corporate</p></div>
<div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
<p style="font-size: 20px;">Venues</p></div>
<div class="col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
<p style="font-size: 20px;">Catering</p></div>

  </div>
</div>
</div>

.second /* or selector a .fa */
  {  
  font-size:32px;
  border-radius: 50%;
  border: ridge;
  border-color: #777777;
  color:#777777;
  line-height: 2em;
  width: 2em;
  height: 2em;
  text-align: center;
  display: inline-block;
    transition:0.5s;
}

.second :hover {}
.fa {
/* optionnal vertical-align: middle;*/
}

Я импортировал бутстрап из CDN. Когда я смотрю его на мобильном устройстве, эти столбцы идут не так, как я указал, они идут по одному в строке, как показано на следующем рисунке:

Может кто-нибудь сказать мне, пожалуйстачто не так с моим кодом, спасибо заранее

Answer 1

Вы должны добавить col в начале вашего класса div в Bootstrap_v4.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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">

<div style="background-color: #F5F5F5	">
<div  class="container">
		<div style="margin-top: 10px;" class="row">
			<div class="col col-sm-6 col-md-3 col-lg-2"> <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a> <p style="font-size: 20px;">Kids</p></div>
			<div class="col col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Weddings</p></div>
			<div class="col col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Other Events</p></div>
			<div class="col col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Corporate</p></div>
			<div class="col col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Venues</p></div>
			<div class="col col-sm-6 col-md-3 col-lg-2"><a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a><p style="font-size: 20px;">Catering</p></div>
		</div>
</div>
</div>

Answer 2

.second /* or selector a .fa */
  {  
  font-size:32px;
  border-radius: 50%;
  border: ridge;
  border-color: #777777;
  color:#777777;
  line-height: 2em;
  width: 2em;
  height: 2em;
  text-align: center;
  display: inline-block;
    transition:0.5s;
}

.second :hover {}
.fa {
/* optionnal vertical-align: middle;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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">

<div style="background-color: #F5F5F5">
    <div  class="container">
        <div style="margin-top: 10px;" class="row">
            <div class="col-6 col-md-3 col-lg-2">
                <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
                <p style="font-size: 20px;">Kids</p>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
                <p style="font-size: 20px;">Weddings</p>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
                <p style="font-size: 20px;">Other Events</p>
            </div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
                <p style="font-size: 20px;">Corporate</p></div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
                <p style="font-size: 20px;">Venues</p></div>
            <div class="col-6 col-md-3 col-lg-2">
                <a href="" class="second"><i class="fa fa-birthday-cake" aria-hidden="true"></i></a>
                <p style="font-size: 20px;">Catering</p>
            </div>
        </div>
    </div>
</div>

Answer 3

Вам необходимо использовать col-6 в качестве последней точки останова, вместо col-sm-6, который имеет половинный размер только для ширины окна ≥576px.

См. Документацию Bootstrap: https://getbootstrap.com/docs/4.3/layout/grid/

Демонстрационная версия