Wie kann ich das folgende Panel ausrichten?

Question

Hier ist der Code für meine Login-Panel. Ich möchte es richtig ausrichten.

<div class="col-sm-3"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <span class="glyphicon glyphicon-log-in"></span> 
       Log In 
      </h3> 
     </div> 
    <div class="panel-body" > 
     <form> 
      <div class="form-group"> 
       <input type="text" class="form-control" id="uid" name="uid" placeholder="Username"> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password"> 
      </div> 
       <button type="submit" class="btn btn-default">Log In</button> 
     </form> 
    </div> 
</div> 

Answer 1

Sie können eine zusätzliche Klasse "right-align" an die Mutter div

<div class="panel panel-default right-align"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <span class="glyphicon glyphicon-log-in"></span> 
       Log In 
      </h3> 
     </div> 
     <div class="panel-body" > 
      <form> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="uid" name="uid" placeholder="Username"> 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password"> 
       </div> 
       <button type="submit" class="btn btn-default">Log In</button> 
      </form> 
     </div> 
    </div> 

hinzufügen und fügen Sie

.right-align{ 
    float: right; 
} 

in Ihrer CSS-Datei.

oder schreiben Sie das Markup einschließlich des übergeordneten divs, um das Problem besser zu verstehen.

Answer 2

Es scheint, als ob Sie Bootstrap verwenden. Wenn dies der Fall ist, können Sie die Klasse "pull-right" oder "text-right" zu Ihrem Panel hinzufügen und prüfen, ob sie Ihren Anforderungen entspricht. Es ist auch gut, daran zu denken, dass der Code in Ihrem Panel die Funktionsweise dieser Klassen ändern kann. Wenn Sie mehr Details zur Verfügung stellen (eine Geige würde helfen), werde ich gerne auf diese Antwort eingehen.

Sie können auch weitere Informationen über Hilfsklassen auf diesem Link: https://getbootstrap.com/docs/3.3/css/#helper-classes