Bootstrap 4 navigaattoripalkin kohteet oikealla puolella

Olen juuri siirtynyt bootstrap 4 ja muokata kaikki minun html ja scss työskennellä sen kanssa ja en voi näyttää löytää miten laittaa ryhmä nav-elementtejä oikealla puolella navbar. Tämä on navigaattoripalkin koodi:

<nav class="navbar navbar-full navbar-dark bg-primary">
        <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
        <div class="collapse navbar-toggleable-sm" id="navbarResponsive"> 
            <ul class="nav navbar-nav float-md-left">
                <li class="nav-item">
                    <%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
                            <%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
                    <% end %>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
                    <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                        <%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav float-md-right">
                <% if user_signed_in? %>
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <%= current_user.displayname.present? ? "D-ring" : current_user.firstname %>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                            <%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %>
                            <%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %>
                        </div>
                    </li>
                <% else %>
                    <li class="nav-item">
                        <%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %>
                    </li>
                    <li class="nav-item">
                        <%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %>
                    </li>         
                <% end %>
            </ul>
        </div>
    </nav>

Ja tämä on kuvakaappaus siitä, miltä se näyttää.

1

Martin Lindgren
Muokattu kysymysT00 syyskuu 2017 в 3:22
Ohjelmointi
bootstrap-4
T44 lokakuu 2016 в 1:49
31 näkymät
Ratkaisu

TL;DR:

Luo toinen <ul class="navbar-nav ml-auto"> oikealle haluamillesi navigaattoripalkin kohteille.
ml-auto vetää navbar-nav:n oikealle, kun taas mr-auto vetää sen vasemmalle.

Testattu Bootstrap v4.1.3:lla.






    /* Stackoverflow preview fix, please ignore */
    .navbar-nav {
      flex-direction: row;
    }

    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }

    /* Fixes dropdown menus placed on the right side */
    .ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }




  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown on Right</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
      </div>
    </li>
  </ul>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Kuten näet, on lisätty lisää muotoilusääntöjä, jotta Stackoverflowsin esikatseluruudussa on joitakin outouksia.
Sinun pitäisi pystyä turvallisesti sivuuttamaan nämä säännöt projektissasi.

V4.0.0:sta lähtien tämä näyttää olevan virallinen tapa tehdä se.

EDIT: Muutin Postia sisällyttämään navigaattoripalkin oikealle puolelle sijoitetun pudotusvalikon @Brunon ehdotuksen mukaisesti. Sen left- ja right-attribuutit on käännettävä. Lisäsin ylimääräisen css-kappaleen esimerkkikoodin alkuun.
Huomaa, että esimerkki näyttää mobiiliversion, kun napsautat Run code snippet -painiketta. Työpöytäversion katsominen edellyttää, että napsautat Expand snippet-painiketta. 

.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

Tämän sisällyttämisen tyylitaulukkoon pitäisi toimia.

eyllanesc
Muokattu vastausta T55 elokuu 2018 в 4:56
Kommentit (10)

Versiossa 4 se on helpompaa. Laita vain ml-auto-luokka ul-luokkaan näin:

<ul class="nav navbar-nav ml-auto">
Ashley Brown
Muokattu vastausta T22 lokakuu 2017 в 8:00
Kommentit (6)

Tämän pitäisi toimia alfa 6:ssa. Avain on vasemman navin luokka "mr-auto", joka siirtää oikean navin oikealle. Sinun on myös lisättävä navbar-toggleable-md tai se pinoutuu sarakkeeseen rivin sijaan. Huomaa, etten lisännyt loput vaihtoelementit (esim. vaihtopainike), vaan lisäsin vain sen verran, että sain sen muotoiltua pyydetyllä tavalla. Tässä on täydellisempiä esimerkkejä https://v4-alpha.getbootstrap.com/examples/navbars/.








        <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link on the Right</a>
                </li>
            </ul>
        </div>
davidkonrad
Muokattu vastausta T11 kesäkuu 2017 в 10:56
Kommentit (1)