如何将引导按钮定位在导航选项卡的右侧? [英] How to position Bootstrap button to right of nav tab?

问题描述

我正在使用Bootstrap的选项卡组件，但无法将蓝色的 Login (登录)按钮刷新到nav-tabs的右侧.我尝试了各种方法，但是显然我不明白为什么它无法定位在我想要的位置.

I am using Bootstrap's tab component and I'm having trouble getting the blue Log In button flush to the right side of the nav-tabs. I tried all kinds of things, but obviously I'm not understanding why it won't get positioned where I want.

这是我要做什么的图片:

Here's an image of what I am trying to do:

HTML:

<section class="container">
  <ul class="nav nav-tabs pt-5">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Data</a></li>
    <li class="nav-item">
      <button type="button" class="btn btn-primary ml-2">Log In</button>
    </li>
  </ul>
</section>

JSFIDDLE:: https://jsfiddle.net/auov8ety/

推荐答案

只需将ml-auto赋予按钮

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<section class="container">
  <ul class="nav nav-tabs pt-5">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Data</a></li>
    <li class="nav-item ml-auto">
      <button type="button" class="btn btn-primary ml-2">Log In</button>
    </li>
  </ul>
</section>

提琴: https://jsfiddle.net/0fep392h/

这篇关于如何将引导按钮定位在导航选项卡的右侧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！