Ik probeer een rij over mijn scherm te krijgen, met inloggegevens aan de linkerkant en wat andere informatie helemaal rechts, rechts uitgelijnd. Dit is mijn mislukte poging:
<div class="container well">
<div class="row">
<div class="col-lg-6">
@(Session["CurrentUserDisplay"] != null ? "Welcome, " + @Session["CurrentUserDisplay"] : "Not logged in")
</div>
<div class="col-lg-6 pull-right">Active Portfolio: @(Session["ActivePortfolioName"].ToString())
</div>
</div>
</div>
Maar de 2e kolom zit in het midden van de rij, dus het lijkt erop dat het niet goed is uitgelijnd in de ‘cel’. Kan iemand mij helpen om dit goed te krijgen?
Antwoord 1, autoriteit 100%
Gebruik in plaats van pull-righttext-right.
De klasse
text-rightlijnt de inhoud van dat element naar rechts uit met behulp van text-align: right.
De klasse
pull-rightlijnt het element zelf uit met behulp van float:right.
Antwoord 2, autoriteit 4%
Ik denk dat je offset moet gebruiken. Voeg de klasse col-md-offset-* toe
Je kunt meer lezen in document: http://getbootstrap.com/css/#grid-offsetting
Antwoord 3, autoriteit 4%
Om een werkend voorbeeld toe te voegen over waar je de klasse pull-rightmoet plaatsen als je in een panel body zit… de vraag is de klasse pull-rightautomatisch de linker- en rechtermarge verwijderen (margin-left:-15px; margin-right:-15px), dus we kunnen de klasse niet zomaar aan de elementen toevoegen zonder ze te omsluiten met een rowen col-lg-12.
Ik denk dat pull-rightbeter is dan col-xx-offset-nomdat we bij de laatste niet weten of de breedte van de elementen uitlijnen zijn slechts de totale breedte van de (12-n) kolommen.
<div class="panel panel-default">
<div class="panel-heading">
This is panel title
</div>
<div class="panel-body">
<div class="row">
...
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button ...></button>
<button ...></button>
</div>
</div>
</div>
</div>
</div>
Het eindresultaat is:
+-----------------+
| panel |
+-----------------+------------------------------------------------+
| |
| This is panel heading. |
| |
+-------------------------------------------------------------------------+
| | |
| row 1, for form elements. | |
| | |
| | |
| | +
| | panel-body
| | +
| | |
| | |
| | |
| | |
+----------------------------------------------+---------+---------+ |
| row 2, only buttons to the right | button1 | button2 | |
+----------------------------------------------+---------+---------+------+