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

Question

我在"col“类中有两个图标。它是用锚标签包裹的精灵图标。它被堆叠在上面。我希望它在水平方向上排成一行。我还想用bootstrap的"order“类重新排序。我该怎么做呢？请帮帮我!

我试着用附加的row和col.And来包装它，使用flex和flex-direction，但是都没有用。

内部页脚

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

彼此上方的图标。我想在水平方向看到它。我想将这些内容重新排序为堆栈中的.Segment-4，然后是.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

如果您使用的是bootstrap 4，请使用order而不是.segment。

例如:用.order-5代替.segment-five。

这些项目是相互水平的，你有没有在标题中包含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">

​

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

​

关于order类的进一步解释：

https://getbootstrap.com/docs/4.3/layout/grid/#order-classes