de-vraag
  • Ερωτήσεις
  • Ετικέτες
  • Χρήστες
Ειδοποιήσεις
Ανταμοιβές
Εγγραφή
Μόλις εγγραφείτε, θα ενημερωθείτε για τις απαντήσεις και τα σχόλια στις ερωτήσεις σας.
Συνδεθείτε
Αν έχετε ήδη λογαριασμό, συνδεθείτε για να ελέγξετε τις νέες ειδοποιήσεις.
Θα υπάρξουν ανταμοιβές για πρόσθετες ερωτήσεις, απαντήσεις και σχόλια.
Περισσότερα
Πηγή
Επεξεργασία
 DRing
DRing
Ερώτηση

Bootstrap 4 στοιχεία navbar στη δεξιά πλευρά

Μόλις μεταπήδησα στο bootstrap 4 και επανασχεδιάζω όλη την html και το scss μου για να δουλέψω με αυτό και δεν μπορώ να βρω πώς να βάλω μια ομάδα nav-items στη δεξιά πλευρά της navbar. Αυτός είναι ο κώδικας της navbar μου:

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

Και αυτό είναι το στιγμιότυπο οθόνης με το πώς μοιάζει

εισάγετε την περιγραφή της εικόνας εδώ1

207 2016-10-21T13:49:16+00:00 3
Martin Lindgren
Martin Lindgren
Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2017 в 3:22
Προγραμματισμός
bootstrap-4
Αυτή η ερώτηση έχει 1 απάντηση στα αγγλικά, για να τις διαβάσετε συνδεθείτε στο λογαριασμό σας.
Λύση / Απάντηση
 Busti
Busti
Κάνε Οκτώβριος 2016 в 3:33
2016-10-22T15:33:31+00:00
Περισσότερα
Πηγή
Επεξεργασία
#31924502

TL;DR:

Δημιουργήστε ένα άλλο <ul class="navbar-nav ml-auto"> για τα στοιχεία της γραμμής πλοήγησης που θέλετε στα δεξιά.
Το ml-auto θα τραβήξει το navbar-nav σας προς τα δεξιά, ενώ το mr-auto θα το τραβήξει προς τα αριστερά.

Δοκιμασμένο με το Bootstrap v4.1.3