Bootstrap 将图标对齐到左侧，将文本对齐到顶部栏的中心

Posted 2023-03-06

【中文标题】Bootstrap 将图标对齐到左侧，将文本对齐到顶部栏的中心

【英文标题】：Bootstrap align icons to leftside and text to center on a top bar

【发布时间】：2020-05-13 01:41:36

【问题描述】：

我在一个网站上使用 Bootstrap CDN，我试图将图标与徽标对齐到左侧，并将文本居中放在顶部栏上。有没有简单的方法来完成它？

Top bar picture

<div class="topbar clearfix"> 
    <div class="container">
        <div class="row-fluid">
            <div class="col-md-4 text-left">
                <div class="social">
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="" data-original-title="Facebook"><i class="fa fa-facebook"></i></a>              
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="" data-original-title="Twitter"><i class="fa fa-twitter"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Google Plus"><i class="fa fa-google-plus"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Linkedin"><i class="fa fa-linkedin"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Youtube"><i class="fa fa-youtube"></i></a>
                    <a href="#" data-tooltip="tooltip" data-placement="bottom" title="Pinterest"><i class="fa fa-pinterest"></i></a>
                </div><!-- end social -->
            </div><!-- end left -->
            <div class="col-md-8 text-right">
                <p>
                    Интернет-магазин производителя фитоламп и промышленного освещения &nbsp;&nbsp;
                    <strong><i class="fa fa-phone"></i></strong> <a href="tel:[phone]">[phone] </a>
                </p>
            </div><!-- end left -->
        </div><!-- end row -->
    </div><!-- end container -->
</div>

【参考方案1】：

尝试使用

 class="container-fluid"

并将 col-md-4 .. 调整为您真正需要的值