56870

How to position Bootstrap button to right of nav tab? [duplicate]

<h3>Question</h3>
<b>This question already has answers here</b>: Bootstrap 4 alpha 6 nav-tabs align item right (2 answers) Closed last year. </aside>

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/


<h3>Answer1:</h3>

simply give ml-auto to the button

<pre class="snippet-code-html lang-html prettyprint-override"><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>

Fiddle: https://jsfiddle.net/0fep392h/


<h3>Answer2:</h3>

You can just use class ml-auto (Read Bootstrap Spacing for more info) on the nav-item that wraps the button:

<pre class="snippet-code-html lang-html prettyprint-override"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <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>
<h3>Answer3:</h3>

I suggest you to seperate the button from the list and use flexbox with justify-content: space-between;

Code sample:

<pre class="snippet-code-css lang-css prettyprint-override">section.container { display: flex; justify-content: space-between; align-items: center; } <pre class="snippet-code-html lang-html prettyprint-override"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <section class="container pt-5"> <ul class="nav nav-tabs"> <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> </ul> <button type="button" class="btn btn-primary ml-2">Log In</button> </section>

来源:https://stackoverflow.com/questions/54368986/how-to-position-bootstrap-button-to-right-of-nav-tab

Recommend

  • Filtering user based on permission names
  • Invalid DefaultDir when running light in WiX
  • making seo/canonicals urls without mod-rewrite on lamp
  • Different Layouts for Horizontal and Vertical for an Android app?
  • How To Read Sound Frequency using Mobile Microphone?
  • Ideas for how to make a date separator (Today/Tomorrow) for a mail inbox like application?
  • Fast way to download data:image from chromes developer tools network window?
  • Pass data from action script to javascript
  • Create a Contact Group via Google Spreadsheet
  • Multiple sort depending on the current day and tomorrow (bus trips)
  • htaccess merge 2 segments with underscore
  • FormsAuthentication.CookieDomain property
  • How to build executable with pyinstaller that uses pycryptodome?
  • How to use InjectTouchInput for specific window?
  • PHP Append to Excel file
  • Sharing multiple images on facebook post
  • Google Apps Script fails to generate image from EmbeddedChartBuilder
  • using JQuery autocomplete from database with PHP (CodeIgniter)
  • Execute powershell script on a remote computer using C#
  • Questions related to Garbage Collector and finalize() method
  • Jenkins - could not read Username for 'https://github.com': No such device or address
  • How to modify the way a ForeignKey field is rendered in a Django admin page to avoid browser crash?
  • Pandas time series data Index from a string to float [duplicate]
  • Circular Left Rotation Algorithm in C#
  • Use AutoIt with java applications
  • Ajax call on Multiple selection in Select box
  • How to use Streams api peek() function and make it work?
  • How to decleare char *const argv[] in swift [duplicate]
  • php “page caching” solution suggestions for CMS Applications
  • How to get rgb from transparent pixel in js
  • multiple button click in asp.net MVC 3
  • Jersey serializes character value to ASCII equivalent numeric string
  • How to use FirstOrDefault inside Include
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • CAS 4 - Not able to retrieve the LDAP groups after successful authentication
  • Running R's aov() mixed effects model from Python using rpy2
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • Access to a Matlab gui from the web