Два поля ввода в одной строке

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 поля ввода в строке, они могут находиться внутри одной строки. вы можете использовать дисплей flex на родительском 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; 
     }