一行中的兩個輸入字段

Question

我想使用Twitter Bootstrap將兩個註冊字段顯示在同一行上。

<div class="form-group required"> 
    <label class="col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label> 
    <div class="col-sm-10"> 
     <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" /> 
     <?php if ($error_firstname) { ?> 
      <div class="text-danger"><?php echo $error_firstname; ?></div> 
     <?php } ?> 
    </div> 
</div> 
<div class="form-group required"> 
    <label class="col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label> 
    <div class="col-sm-10"> 
     <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" /> 
     <?php if ($error_lastname) { ?> 
      <div class="text-danger"><?php echo $error_lastname; ?></div> 
     <?php } ?> 
    </div> 
</div> 

我該怎麼做？

Answer 1

在引導你被允許巢列和行交替，這應該這樣做：

<div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="form-group required"> 
      <label class="col-xs-12 col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label> 
      <div class="col-xs-12 col-sm-10"> 
       <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" /> 
       <?php if ($error_firstname) { ?> 
        <div class="text-danger"><?php echo $error_firstname; ?></div> 
       <?php } ?> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="form-group required"> 
      <label class="col-xs-12 col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label> 
      <div class="col-xs-12 col-sm-10"> 
       <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" /> 
       <?php if ($error_lastname) { ?> 
        <div class="text-danger"><?php echo $error_lastname; ?></div> 
       <?php } ?> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

只需更改包含您的輸入元素的引導類：

<div class="form-group required"> 
 
     <label class="col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label> 
 
     <div class="col-sm-2"> 
 
      <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" /> 
 
      <?php if ($error_firstname) { ?> 
 
      <div class="text-danger"><?php echo $error_firstname; ?></div> 
 
      <?php } ?> 
 
     </div> 
 
     </div> 
 
     <div class="form-group required"> 
 
     <label class="col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label> 
 
     <div class="col-sm-2"> 
 
      <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" /> 
 
      <?php if ($error_lastname) { ?> 
 
      <div class="text-danger"><?php echo $error_lastname; ?></div> 
 
      <?php } ?> 
 
     </div> 
 
     </div>

這裏是jsfiddle： https://jsfiddle.net/DTcHh/23304/

Answer 3

可以有更多的解決方案，在行中有2個輸入字段，它們可以在一行內。您可以在父div上使用display flex。

HTML

 <div class="contianer"> 
      <div class="row"> 
      <input type="text" placeholder="field 1" class=""> 
      </div> 
      <div class="row"> 
      <input type="text" placeholder="field 2" class=""> 
      </div> 
     </div> 

     <br><br><br><br> 

     <div class="container"> 
      <div class="row"> 
      <div class="col-xs-12 col-sm-6"> 
       <div class="form-group required"> 
        <label class="col-xs-12 col-sm-2 control-label" for="input-firstname"><?php echo $entry_firstname; ?></label> 
        <div class="col-xs-12 col-sm-10"> 
         <input type="text" name="firstname" value="<?php echo $firstname; ?>" placeholder="<?php echo $entry_firstname; ?>" id="input-firstname" class="form-control" /> 
         <?php if ($error_firstname) { ?> 
          <div class="text-danger"><?php echo $error_firstname; ?></div> 
         <?php } ?> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-12 col-sm-6"> 
       <div class="form-group required"> 
        <label class="col-xs-12 col-sm-2 control-label" for="input-lastname"><?php echo $entry_lastname; ?></label> 
        <div class="col-xs-12 col-sm-10"> 
         <input type="text" name="lastname" value="<?php echo $lastname; ?>" placeholder="<?php echo $entry_lastname; ?>" id="input-lastname" class="form-control" /> 
         <?php if ($error_lastname) { ?> 
          <div class="text-danger"><?php echo $error_lastname; ?></div> 
         <?php } ?> 
        </div> 
       </div> 
      </div> 
     </div> 
     </div> 

CSS

 .contianer { 
      display: flex; 
      flex-direction: row; 
      margin-left: 30px; 
      margin-top: 50px; 
     } 

     .row { 
      flex: 1 1 auto; 
      margin-left: 5px; 
     }