Salve, sono nuovo di bootstrap e sto muovendo i primi passi con la versione 4.2
Vengo subito al dunque: sono (molto bovinamente) riuscito a posizionare una navbar fissa in basso alle mie pagine. Mi viene chiesto che la stessa non si espanda per tutta la larghezza della pagina e che sia posizionata sulla destra.
Ho risolto con il dimensionamento (fissato dal committente in 200px), aggiungendo un id alla navbar e stilizzando, ma non trovo come dirgli di allineare il tutto a destra
codice:
#navbarcontainer {
width:200px;
bottom:20px;
}
codice:
<nav id="navbarcontainer" class="navbar fixed-bottom navbar-dark bg-dark">
<a class="navbar-brand" href="#">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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="#">Upcoming Work</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Project Archive</a>
<div class="dropdown-menu" aria-labelledby="dropdown10">
<a class="dropdown-item" href="#">Project 01</a>
<a class="dropdown-item" href="#">Project 02</a>
<a class="dropdown-item" href="#">Project 03</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Collaborations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Listen to music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Press</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bios</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contacts</a>
<div class="dropdown-menu" aria-labelledby="dropdown10">
<a class="dropdown-item" href="#">Contacts</a>
<a class="dropdown-item" href="#">Sign up for our newsletter</a>
</div>
</li>
</ul>
</div>
</nav>