將兩個圖標水平對齊到一行

Question

我在“ col”類中有兩個圖標。 它是用錨標記包裹的精靈圖標。 它堆疊在上面。 我希望它水平成一行。 我也想用bootstrap“ order”類對其重新排序。 我怎樣才能做到這一點？ 請幫我！

我試圖用額外的行和列包裝它，並在flex-direction中使用flex，但沒有任何幫助。

內部頁腳

我想在.segment-six類中對齊的兩個圖標

彼此上方的圖標。 我想水平看到它。 我想將這些東西重新排序為.segment-四個，然后是.segment-六個，然后是.segment-五個

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

例如： .segment-five .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