Πώς μπορώ να ευθυγραμμίσω ένα στοιχείο της γραμμής πλοήγησης προς τα δεξιά;
Θέλω να έχω τη σύνδεση και την εγγραφή στα δεξιά. Αλλά ό,τι κι αν δοκιμάσω δεν φαίνεται να λειτουργεί.
<div>
γύρω από το <ul>
με το χαρακτηριστικό: style="float: right"
<div>
γύρω από το <ul>
με το atribute: style="text-align: right"
<li>
!important
στο τέλοςnav-item
σε nav-right
στο <li>
pull-sm-right
στο <li>
align-content-end
στο <li>
<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>
Το Bootstrap 4 έχει πολλούς διαφορετικούς τρόπους ευθυγράμμισης των στοιχείων της γραμμής πλοήγησης. Το float-right
δεν θα λειτουργήσει επειδή η navbar είναι τώρα flexbox
.
Μπορείτε να χρησιμοποιήσετε το νέο mr-auto
για αυτόματο δεξιό περιθώριο στο 1ο (αριστερό) navbar-nav
.
Εναλλακτικά, το ml-auto
θα μπορούσε να χρησιμοποιηθεί στο 2ο (δεξί) navbar-nav
, ή αν έχετε μόνο ένα navbar-nav
.
<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 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>
</nav>
</div>
http://www.codeply.com/go/P0G393rzfm
Υπάρχουν επίσης βοηθητικά προγράμματα flexbox. Σε αυτή την περίπτωση, έχετε 2 navbar-nav
, οπότε το justify-content-between
στο navbar-collapse
θα λειτουργούσε για την εξομάλυνση του χώρου μεταξύ τους,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
<hr>, Ενημέρωση για το Bootstrap 4.0 και νεότερες εκδόσεις
Από την beta έκδοση του Bootstrap 4, το ml-auto
θα εξακολουθεί να λειτουργεί για να σπρώχνει τα στοιχεία προς τα δεξιά. Απλά πρέπει να γνωρίζετε ότι οι κλάσεις navbar-toggleable-
έχουν αλλάξει σε navbar-expand-*
.
Ενημέρωση navbar δεξιά για το Bootstrap 4
<hr>,
Ένα άλλο συχνό σενάριο ευθυγράμμισης της Navbar δεξιά στο Bootstrap 4 περιλαμβάνει ένα κουμπί στα δεξιά που παραμένει εκτός της κινητής κατάρρευσης της nav, έτσι ώστε να εμφανίζεται πάντα σε όλα τα πλάτη.
Κουμπί δεξιάς στοίχισης που είναι πάντα ορατό
<hr>,
Στην περίπτωσή μου, ήθελα μόνο ένα σύνολο κουμπιών/επιλογών πλοήγησης και διαπίστωσα ότι αυτό θα λειτουργήσει:
<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>
Έτσι, θα προσθέσετε το justify-content-end
στο div και θα παραλείψετε το mr-auto
στη λίστα.
Ακολουθεί ένα παράδειγμα εργασίας.
Είμαι νέος στο stack overflow και νέος στην ανάπτυξη του front end. Αυτό είναι που λειτούργησε για μένα. Έτσι, δεν ήθελα να εμφανίζονται τα στοιχεία της λίστας.