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-6作为最后一个断点，而不是col-sm-6，后者仅在窗口宽度≥576px时才是一半大小。

请参阅Bootstrap文档：https://getbootstrap.com/docs/4.3/layout/grid/

Live demo

Answer 2

您应该在Bootstrap_v4的div类的开头添加col。

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

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

Bootstrap列未根据屏幕尺寸调整大小

3 个答案: