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>

更新使用内置功能的bootstrap
Bootstrap已经为您要执行的操作提供了一项功能，请参阅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>

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

1 个答案: