Bootstrap 4 izlīdzināt navigācijas joslas elementus pa labi

Kā izlīdzināt navigācijas joslas elementu pa labi?

Es gribu, lai pieteikšanās un reģistrācija būtu labajā pusē. Bet šķiet, ka viss, ko mēģinu, nedarbojas.

1

Tas ir tas, ko es līdz šim esmu mēģinājis:

  • <div> ap <ul> ar atribūtu: style="float: right"
  • <div> ap <ul> ar atribūtu: style="text-align: right"
  • izmēģināja šīs divas lietas <li> tagos
  • vēlreiz izmēģināja visas šīs lietas, beigās pievienojot !important.
  • mainīja nav-item uz nav-right <li>
  • pievienoja pull-sm-right klasi <li>
  • <li> pievienota align-content-end klase.

Šis ir mans kods:

<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
Rediģēts jautājums 20pēcpusdienari3t decembrī 2018 в 9:53
Programmēšana
css twitter-bootstrap flexbox bootstrap-4 navbar
6pēcpusdienari4t janvārī 2017 в 8:02
14 skati
Risinājums

Bootstrap 4 ir dažādi dažādi navigācijas joslas elementu izlīdzināšanas veidi. float-right nedarbosies, jo navigācijas josla tagad ir flexbox.

Jūs varat izmantot jauno mr-auto automātiskai labās malas rezervei 1 (kreisajā) navbar-nav. Alternatīvi, ml-auto var izmantot **2. (labajā) navbar-nav, vai ja jums ir tikai viena 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

Ir arī flexbox palīgrīki. Šajā gadījumā jums ir 2 navbar-nav, tāpēc justify-content-between in navbar-collapse varētu izlīdzināt atstarpi starp tām,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>
**Atjauninājums Bootstrap 4.0 un jaunākām versijām**

Sākot ar Bootstrap 4 beta versiju, ml-auto joprojām darbosies, lai atvirzītu elementus pa labi. Tikai ņemiet vērā, ka navbar-toggleable- klases ir mainītas uz navbar-expand-*.

Atjaunināts navigācijas josla pa labi Bootstrap 4

Vēl viens biežs Bootstrap 4 navigācijas joslas labajā pusē izlīdzināšanas scenārijs ietver pogu labajā pusē, kas paliek ārpus mobilās salokāmās navigācijas, lai tā vienmēr būtu redzama visos platumos.

Labajā pusē vienmēr redzama izlīdzināšanas poga

1

2

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

Zim
Rediģēta atbilde 15pēcpusdienari2t augustā 2018 в 1:04
Komentāri (7)

Manā gadījumā es vēlējos tikai vienu navigācijas pogu / opciju kopumu un konstatēju, ka tas darbojas:

<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>

Tātad, jūs pievienosiet justify-content-end div un izlaidīsiet mr-auto sarakstā.

Šeit ir darba piemērs.

Komentāri (6)

Es'esmu jauns, lai stack overflow un jauns, lai front end attīstība. Tas ir tas, kas man palīdzēja. Tātad es negribēju, lai tiktu parādīti saraksta elementi.

.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>
Komentāri (0)