Html 页脚社交图标赢得'；t对齐

我正在尝试排列我的社交图标，以便它们将被放置在与页脚中的某些文本相同的级别上。我将提供一个页脚，我已经到目前为止，以及html和css代码，我已经做了。我想知道我是否需要将社交图标放到另一个div中，这样我就可以通过这种方式控制位置，还是需要在这里使用position元素

页脚{
背景:#212529；
颜色：白色；
宽度：计算（100%-80px）；
左边距：80px；
右边距：-15px；
}
页脚a{
颜色：#fff；
字体大小：14px；
过渡时间：0.2s；
}
页脚a：悬停{
颜色：#FA944B；
文字装饰：无；
}
.复制{
字体大小：12px；
填充：10px；
边框顶部：1px实心#FFFFFF；
}
.页脚中间{
垫面：2米；
颜色：白色；
}
/*页脚社交图标*/
社交网络{
列表样式：无；
显示：内联；
左边距：0！重要；
填充：0；
}
社交网络{
显示：内联；
利润率：0.5px；
}
社交网络Facebook：悬停{
背景色：#3B5998；
}
社交网络{
背景色：#007bb7；
}
社交网络Facebook:hover i，
社交网络{
颜色：#fff；
}
社交网络社交网站，
.社会阶层{
颜色：#44BCDD；
}
.社交圈李a{
显示：内联块；
位置：相对位置；
边距：0自动0自动；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
文本对齐：居中；
宽度：30px；
高度：30px；
字体大小：15px；
}
·社交圈李一{
保证金：0；
线高：30px；
文本对齐：居中；
}
.社交圈李a：悬停i，
triggeredHover先生{
-moz变换：旋转（360度）；
-webkit变换：旋转（360度）；
-ms——变换：旋转（360度）；
变换：旋转（360度）；
-webkit转换：所有0.2秒；
-moz转换：全部为0.2s；
-o-过渡：均为0.2s；
-ms转换：均为0.2s；
过渡：均为0.2s；
}
.社交圈一{
颜色：#5959；
-webkit转换：所有0.8秒；
-moz转换：所有0.8秒；
-o-过渡：均为0.8s；
-ms转换：所有0.8s；
过渡：所有0.8秒；
}
.社交网络a{
背景色：#F9F9F9；
}

活动


漂流





信息






副食品





合伙人










苏维兹·努斯
©；版权所有2018-公司名称。版权所有

将CSS添加到

Suivez-Nous

h4{display:inline}

并更改顺序

将CSS添加到

Suivez-Nous

h4{display:inline}”

并更改顺序

您可以将

d-flex

类添加到

.col-md-3

元素中，因此

元素和社交图标将排成一行

另外，我已将

.col-md-3

更改为

.col-md-6

，原因是

中的.col-md-3

图标开始缠绕到多行上

<div class="col-md-6 d-flex">
          <h4>Suivez-Nous</h4>
        
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>
          </ul>
          
        </div>

苏维兹·努斯

---

完整代码：

您可以将

d-flex

类添加到

.col-md-3

元素中，因此

元素和社交图标将排成一行

另外，我已将

.col-md-3

更改为

.col-md-6

，原因是

中的.col-md-3

图标开始缠绕到多行上

<div class="col-md-6 d-flex">
          <h4>Suivez-Nous</h4>
        
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>
          </ul>
          
        </div>

苏维兹·努斯

---

完整代码：

您能更清楚地了解我们想要实现什么吗？在我提供的照片中，社交图标位于“Suivez Nous”之上。我希望它与文本在同一行，就在它的右边：）。给

d-flex

一个

.col

类，然后把

放在前面，然后是

ul

。你想这样做吗？你能更清楚地知道你想要实现什么吗？在我提供的照片中，社交图标位于“Suivez-Nous”之上。我希望它与文本在同一行，就在它的右边：）。将

d-flex

与

.col

类放在一起，然后将

放在

ul

…你想要这个吗