如何在引导程序中将徽标图像、电话、位置放在导航栏上方？答案

【问题标题】：How to place logo image , phone, location above navbar in bootstrap?如何在引导程序中将徽标图像、电话、位置放在导航栏上方？
【发布时间】：2021-10-26 08:34:08
【问题描述】：

我是 Bootstrap 的新手：我想在导航上方放置徽标图像、带有地址的位置图像、带有文本的电话号码。徽标细节应居中。我尝试过的：

    <header >
            
        <div class="container ">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <img class="img-fluid" style="max-width: 50%;" src="images/logo.png" alt="logo">
                    <img class="img-fluid" style="max-width: 5%" src="images/header-address.png" alt="logo">
                 <span class="span-text">1234 Abcd Efg  <br> HI jk Lm,123466 </span> 
                 <img class="img-fluid" style="max-width: 5%;" src="images/header-phone.png" alt="logo">
                <span class="span_text">(123) 456 7890 <br> Call Us </span> 
                </div>
                <div class="col-md-6">
                    
                </div>
            </div>

            </div>  
            </header>
        
        <section >
            <div class="container mx-auto">
                <div class="row">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">HOME</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">GALLERY</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT US</a>
        </li>     
        
      </ul>
      
    </div>
  </div>
</nav></div>
            </div>
        </section>

徽标、位置和电话号码未对齐。
如何解决这个问题？

【问题讨论】：

尝试使用表格对齐项目。
@TheBetweener 怎么样？是否有可能在引导程序中。我想要响应式设计
getbootstrap.com/docs/4.1/content/tables
居中如何？垂直（|）还是水平（-）？
我不确定它是否响应，但您可以使用表格对齐。

标签： html css class bootstrap-4 navigation

【解决方案1】：

将margin: 0 auto; 用于.col-md-6

.col-md-6 {
    flex: 0 0 auto;
    width: 50%;
    text-align: center;
}

如果您还想将导航项居中，请添加以下内容：

.navbar-expand-lg .navbar-nav {
    flex-direction: row;
    margin: 0 auto;
}

导航项目居中：

都以 text-align 居中

【讨论】：

导航正常，但位置和电话文本未正确对齐
@Binsha 更新了答案。现在可以用了吗？
@Binsha 你想要哪一张（图片）

热门电话号码...居中：

导航项目居中：

都以 text-align 居中