Question

我有以下代码堆叠控件，从而形成4行。

我尝试删除div并应用行类，但它们仍然不包含在单行中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
                                       <div class ="col-sm-6" >
                                            <div class="panel panel-primary">
                                                <div class="row">
                                                    
                                                    <div>
                                                                Out of spec:
                                                    </div>
                                                     <div>
                                                         <input type="text" class="form-control  input-md"/>
                                                    </div>
                                                     <div>
                                                         Is Blood dark:
                                                         </div>
                                                    <div>
                                                         <input type="text" class="form-control  input-md"/>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
</div>

Answer 1

这很好用：

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
            <div class="row">
                                   <div class ="col-sm-6" >
                                        <div class="panel panel-primary">
                                            <div class="row">

                                                <div class="col-sm-6">
                                                            <label>Out of spec:</label>
                                                     <input type="text" class="form-control  input-md"/>
                                                </div>
                                                 <div class="col-sm-6">
                                                     <label>Is Blood dark:</label>
                                                     <input type="text" class="form-control  input-md"/>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
            </div>

Answer 2

你可以这样做：

<div class="row">
  <div class ="col-sm-6" >
      <div class="panel panel-primary">
          <form class="form-inline">
              <div calss="form-group">
                <label>Out of spec:</label>
                <input type="text" class="form-control  input-md"/>
             </div>
             <div class="form-group">
               <label>Is Blood dark:</label>
               <input type="text" class="form-control  input-md"/>                                                    </div>
          </form>
      </div>
  </div>
</div>

或者

<div class="row">
   <div class ="col-sm-6" >
        <div class="panel panel-primary">
            <form class="form-inline">
               
                  <label>Out of spec:</label>
                  <input type="text" class="form-control  input-md"/>               

                 <label>Is Blood dark:</label>
                 <input type="text" class="form-control  input-md"/>    
            </form>
        </div>
    </div>
</div>

如何将HTML控件放在同一行而不是堆叠

2 个答案: