"Bootstrap 4" išlyginkite navbar elementus į dešinę

Kaip išlyginti navbar elementą į dešinę?

Noriu, kad prisijungimas ir registracija būtų dešinėje. Bet viskas, ką bandau, atrodo, neveikia.

Štai ką bandžiau iki šiol:

  • <div> aplink <ul> su atributu: style="float: right"
  • <div> aplink <ul> su atributu: style="text-align: right"
  • išbandykite šiuos du dalykus <li> žymėse
  • dar kartą pabandė visus šiuos dalykus su !important pabaigoje
  • pakeitė nav-item į nav-right žodyje <li>
  • į <li> pridėjo pull-sm-right klasę
  • į <li> pridėta align-content-end klasė

Tai yra mano kodas:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
Zim
Redaguotas klausimas popietr gruodis 2018 в 9:53
Programavimas
css twitter-bootstrap flexbox bootstrap-4 navbar
popietr sausis 2017 в 8:02
20 peržiūros
Sprendimas

Bootstrap 4 turi daugybę skirtingų navbar elementų išlyginimo būdų. float-right neveiks, nes navbar dabar yra flexbox.

Galite naudoti naująją mr-auto, kad 1 (kairėje) navbar-nav juostoje būtų automatinė dešinioji paraštė. **Arba, jei turite tik vieną navbar-nav, galite naudoti ml-auto antrajam (dešiniajam) navbar-nav arba jei turite tik vieną navbar-nav.

<div id="app" class="container">


      <span class="navbar-toggler-icon"></span>

    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>

</div>

http://www.codeply.com/go/P0G393rzfm

Taip pat yra flexbox įrankių. Šiuo atveju turite 2 navbar-nav, todėl justify-content-between, esantis navbar-collapse, išlygintų tarpą tarp jų,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>
**Atnaujinimas, skirtas "Bootstrap 4.0" ir naujesnėms versijoms**

Nuo "Bootstrap 4 beta" versijos ml-auto vis dar veiks, jei norite elementus pastumti į dešinę. Tik žinokite, kad navbar-toggleable- klasės pakeistos į navbar-expand-*.

Atnaujinta navbar dešinėje "Bootstrap 4"

Dar vienas dažnas "Bootstrap 4 Navbar" dešiniosios navbar dalies derinimo scenarijus apima mygtuką dešinėje, kuris išlieka už mobiliojo susilankstymo nav, kad jis visada būtų rodomas esant bet kokiam pločiui.

Dešiniojo lygiavimo mygtukas, kuris visada matomas

Susiję: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024

Zim
Redaguotas atsakymas popietr rugpjūtis 2018 в 1:04
Komentarai (7)

Mano atveju norėjau tik vieno navigacijos mygtukų / parinkčių rinkinio, todėl radau, kad tai veikia:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

Taigi, į divą pridėsite justify-content-end, o sąraše praleisite mr-auto.

Štai darbinis pavyzdys.

Komentarai (6)

Aš'esu naujas stack overflow ir naujas priekinės dalies kūrimas. Tai yra tai, kas man pavyko. Taigi aš nenorėjau, kad būtų rodomi sąrašo elementai.

.hidden {
  display:none;
  } 

 #loginButton{

 margin-right:2px;

 }


    <span class="navbar-toggler-icon"></span>

  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

      <a href="#">Log In</a>
      <a href="#">Register</a>

  </div>
Komentarai (0)