时间戳

首页 > 解决方案 > 将两个图标水平对齐到一行

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

问题描述

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

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

内部页脚

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

彼此上方的图标。我想看它是水平的。我想将这些东西重新排序为 .segment-4 首先然后 .segment-6 然后 .segment-5 在堆栈中

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

标签： htmlcssbootstrap-4

解决方案

在您的 CSS 中添加此代码

css

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

推荐阅读