1つの行に2つの入力フィールド

Question

Twitter Bootstrapを使用して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-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つの入力フィールドを1つの行内に配置する方法があります。親のdivにディスプレイフレックスを使用することができます。

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