2016-06-03 7 views
0

Ich versuche, meine form-control nach links neben meinem Absatz zu schieben. Was wird nicht funktionieren immer unterhalb des Absatzes.Wie Formularsteuerung neben Absatz drücken

<div class="container"> 

    <div class="panel panel-default"> 

     <div class="panel-heading"> 

      <div class = "panel-body"> 
       <p class = "thicker">STUDENT ID</p> 

       <div class = "col-xs-3"> 
        <input class = "form-control" name = "search"> 
       </div> 
      </div> 

     </div> 

    <div> 
<div> 
+0

können Sie die Klasse col-xs-3 auf p verwenden Tag – Naresh217

+0

@ Naresh217 funktioniert gut, aber es drückt nicht neben dem Absatz auch entfernt den fett gedruckten Text. – Francisunoxx

+0

Verwenden Sie col-xs-3 als @ Naresh217 erwähnt und legen Sie Ihre p-Tag und unter

input
. Kannst du den fettgedruckten Text noch etwas näher erläutern? – StaticBeagle

Antwort

0

Add col-xs-3 auf Ihre p-Tag und die Reihenfolge der im Inneren des tafelKörperElemente ändern von

<div class = "panel-body"> 
    <p class = "thicker">STUDENT ID</p> 
    <div class = "col-xs-3"> 
     <input class = "form-control" name = "search"> 
    </div> 
</div> 

zu

<div class = "panel-body"> 
    <div class = "col-xs-3"> 
     <input class = "form-control" name = "search"> 
    </div> 
    <p class = "thicker col-xs-3">STUDENT ID</p> 
</div> 

UPDATE Bootstrap verwenden eingebaute Funktionalität
Bootstrap hat bereits eine Funktionalität für das, was Sie tun möchten, siehe http://getbootstrap.com/css/#forms-horizontal. Die Verwendung der integrierten Funktionalität erleichtert Ihnen möglicherweise die Arbeit in Zukunft, wenn das Fenster verkleinert wird. So sieht der Code aus: