如何在段落旁边推送表单控件

Question

我试图将我的form-control推到段落旁边的左侧。这行不通，它总是放在段落下方。

<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>

Answer 1

将 col-xs-3 添加到您的 p 标签中，并将面板主体内元素的顺序从

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

自

<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>

更新 使用引导内置功能
引导程序已经具有您尝试执行的操作的功能，请参阅 http://getbootstrap.com/css/#forms-horizontal。使用内置功能可能会使您将来在重新调整窗口大小等时更轻松。这是代码

的外观

<div class="container">
   <div class="panel panel-default">
       <div class="panel-heading">
           <div class = "panel-body">
               <form class="form-horizontal">
                   <div class="form-group">
                       <label for="studentID" class="col-xs-3 control-label">Student ID</label>
                       <div class="col-xs-3">
                           <input type="text" class="form-control" name="search" placeholder="Search">
                       </div>
                   </div>
               </form>
           </div>
       </div>
    </div>   
</div>