无法对齐移动设备的品牌徽标，图标和汉堡菜单按钮

时间：2019-04-15 05:44:50

标签： html css bootstrap-4 alignment nav

我是新手，因此仍然想尽一切办法。

我想要实现的是将品牌徽标左对齐，并在右侧使用电话图标和汉堡导航图标。它应该看起来像这样：

not aligning correctly for mobile view

我“不正确”使用的代码可以在这里看到：

https://www.codeply.com/go/rFsHK3IT8g

如您所见，当前在智能手机视图中，它们都向左对齐。

任何帮助将不胜感激。谢谢。

V

4 个答案:

答案 0 :(得分：1)

不需要行列结构。只需使用引导程序提供的模板来创建导航栏，它就可以正常工作，并且由于右侧有2个按钮，因此请将它们保留在d-flex div中。

在下面的代码中更新了本节

<a class="navbar-brand" href="#" style="padding:0px;margin:0;">
    <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class="d-flex ml-auto">
    <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
      <i class="fas fa-phone fa-2x"></i>
    </a>
    <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
            <i class="fas fa-bars  fa-2x"></i>
        </button>
  </div>


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
  <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
    <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class="d-flex ml-auto">
    <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
      <i class="fas fa-phone fa-2x"></i>
    </a>
    <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
            <i class="fas fa-bars  fa-2x"></i>
        </button>
  </div>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Affiliations</a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</main>

答案 1 :(得分：1)

好吧，我对您的html做了一些更改。您可以在此处查看工作代码： https://www.codeply.com/go/paFQ52qLUK

您需要做的只是：

  1. 确保该行占用了其父级的所有宽度
  2. 将col-sm更改为col-auto
  3. 从上一列删除ml-auto

答案 2 :(得分：0)

我已将图标和汉堡包放入div中，并向其中添加了d-flex no-gutters引导类，并添加到了CSS之下

.brand-hamburger {
  width: 100%;
}


.brand-hamburger {
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">

  <div class="row no-gutters brand-hamburger">
    <div class="col-sm">
      <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
        <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
      </a>
    </div>
    <div class="d-flex no-gutters">
      <div class="col-sm ml-auto">
        <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
          <i class="fas fa-phone fa-2x"></i>
        </a>
      </div>
      <div class="col-sm ml-auto">
        <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
          aria-label="Toggle navigation">
    				<i class="fas fa-bars  fa-2x"></i>
    			</button>
      </div>
    </div>
  </div>





  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Affiliations</a>
      </li>

    </ul>
  </div>
</nav>

<main role="main" class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main>

答案 3 :(得分：0)

在该div中放置一个父div，将图标使用display：flex作为父div，并将div行中的宽度设为100％，这同样适用于移动设备

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
       <div class="row no-gutters" style="width: 100%;">
          <div class="col-sm">
             <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
             <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
             </a>
          </div>
          <div class="mobile-device" style="display:flex">
             <div class="col-sm ml-auto">
                <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
                <i class="fas fa-phone fa-2x"></i>
                </a>      
             </div>
             <div class="col-sm ml-auto">
                <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars  fa-2x"></i>
                </button>
             </div>
          </div>
       </div>
       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav ml-auto">
             <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Our Team</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Affiliations</a>
             </li>
          </ul>
       </div>
    </nav>
    <main role="main" class="container">
       <div class="starter-template">
          <h1>Bootstrap starter template</h1>
          <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
       </div>
    </main>
相关问题
最新问题