Question

我在“ col”类中有两个图标。它是用锚标记包裹的精灵图标。它堆叠在上面。我希望它水平成一行。我也想用bootstrap“ order”类对其重新排序。我怎样才能做到这一点？请帮我！

我试图用额外的行和列包装它，并在flex-direction上使用flex，但没有任何帮助。

内部页脚

我想在.segment-six类中对齐的两个图标

彼此上方的图标。我想水平看到它。我想将这些东西重新排序为.segment-four，然后是.segment-six，然后是.segment-five，

.segment-six {
  /* display: flex; 
   flex-direction: row; */
  width: 120px;
  /* margin-left:auto;
   margin-right: 20%; */
  img {
    max-width: 100%;
    max-height: 100%;
    /* padding-left: 50px; */
  }
}

<!-- Bootstrap -->
<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 class="row">
  <div class="col-md-3 col-sm-12 col-xs-12 segment-four">
    <img src="https://via.placeholder.com/50">
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12 segment-six">
    <a href="#"><img src="https://via.placeholder.com/100"></a>
    <a href="#"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12 segment-five">
    <p>©TOO SMART PAY ПЛАТЕЖНАЯ ОРГАНИЗАЦИЯ №02-17-012 OT 09.02.2017 РЕЕСТР НАЦИОНАЛЬНОГО БАНКА РК</p>
  </div>
</div>

Answer 1

将此代码添加到您的CSS

css

.segment-six a{
    float: left;
 }
.segment-six a img{
    max-width:100%;
    height:auto;
}

Answer 2

如果您使用的是引导程序4，请使用order代替.segment。

例如：.order-5而不是.segment-five。

这些项目彼此水平，您是否在标题中包含了引导程序？
<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">

.order-6 {
  /* display: flex; 
   flex-direction: row; */
  width: 120px;
  /* margin-left:auto;
   margin-right: 20%; */
  img {
    max-width: 100%;
    max-height: 100%;
    /* padding-left: 50px; */
  }
}

<!-- Bootstrap -->
<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 class="row">
  <div class="col-md-3 col-sm-12 col-xs-12 order-4">
    <img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+1">
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12 order-6">
    <a href="#"><img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+2"></a>
    <a href="#"><img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+3"></a>
  </div>
  <div class="col-md-6 col-sm-12 col-xs-12 order-5">
    <p>©TOO SMART PAY ПЛАТЕЖНАЯ ОРГАНИЗАЦИЯ №02-17-012 OT 09.02.2017 РЕЕСТР НАЦИОНАЛЬНОГО БАНКА РК</p>
  </div>
</div>

有关订单类的进一步说明：
https://getbootstrap.com/docs/4.3/layout/grid/#order-classes

将两个图标水平对齐到一行

2 个答案: