Правильный способ установить два поля ввода бок о бок в форме Bootstrap 3?

Question

У меня есть форма со многими полями ввода. Чтобы уберечь пользователей от прокрутки на средних и больших экранах, я хотел бы разместить некоторые поля ввода рядом друг с другом. Не все поля должны быть рядом, и поэтому я не использую встроенную форму. Вот пример того, что у меня есть:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmDemo" id="frmDemo">
  <div class="form-group required">
    <label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
    <input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
    <input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
        <select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
          <option value="">--Choose Plan--</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
        <input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
      <select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
        <option value="">--Choose Gender--</option>
        <option value="F">Female</option>
        <option value="M">Male</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
      <select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
        <option value="">--Choose Grade--</option>
        <option value="PK">PK</option>
        <option value="00">00</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="frmDemo_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

Как видите, я смог достичь этого и расположить поля рядом. Мой вопрос: как правильно это сделать? Мой первый набор полей для ввода Plan использует form-group div, затем row div и затем col- div. Во втором наборе полей ввода для Grade и Gender используется row div, а затем form-group col-. Оба способа работают, но какой из них действует в соответствии с правилами Bootstrap? Если кто-то может объяснить или дать мне предложения, я был бы признателен. Спасибо.

Answer 1

Все в порядке. Но если вам нужны другие способы без использования строк и столбцов Bootstrap, вы можете настроить таргетинг на конкретную .form-группу в своем CSS. Лично я делаю это, потому что это намного чище, чем иметь много вложенных строк и столбцов. Я бы использовал строки и столбцы только для других целей.

HTML:

<div class="form-group required">
    <label class="control-label" for="last"><span class="label label-primary">Last Name:</span></label>
    <input type="text" class="form-control" name="frmDemo_last" id="frmDemo_last" placeholder="Enter Last Name" maxlength="50" required>
</div>

<div class="form-group required">
     <label class="control-label" for="first"><span class="label label-primary">First Name:</span></label>
    <input type="text" class="form-control" name="frmDemo_first" id="frmDemo_first" placeholder="Enter First Name" maxlength="50" required>
</div>

<div class="form-group">
    <label class="control-label" for="plan"><span class="label label-primary">Plan:</span></label>
    <select class="form-control" name="frmDemo_plan" id="frmDemo_plan">
        <option value="">--Choose Plan--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

<div class="form-group">
    <label class="control-label" for="plantext"><span class="label label-primary">Plan Text:</span></label>
    <input type="text" class="form-control" name="frmDemo_plantext" id="frmDemo_plantext" placeholder="Enter Plan Text" maxlength="50">
</div>

<div class="form-group">
    <label class="control-label" for="gender"><span class="label label-primary">Gender:</span></label>
    <select class="form-control" name="frmDemo_gender" id="frmDemo_gender" required>
        <option value="">--Choose Gender--</option>
        <option value="F">Female</option>
        <option value="M">Male</option>
    </select>
</div>

<div class="form-group">
    <label class="control-label" for="gender"><span class="label label-primary">Grade:</span></label>
    <select class="form-control" name="frmDemo_grade" id="frmDemo_grade" required>
        <option value="">--Choose Grade--</option>
        <option value="PK">PK</option>
        <option value="00">00</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
    </select>
</div>

<div class="form-group">
    <button type="submit" name="frmDemo_submit" id="frmDemo_submit" class="btn btn-primary">Submit</button>
</div>

<div class="form-group">
    <div id="frmDemo_message" class="alert message-submit"></div>
</div>

CSS:

/* I used nth-child(n+number) pseudoclass selector since you wanted to start from the 3rd div with .form-group class to be side by side with each other. */

.form-group:nth-child(n+3) {
    width:50%;
    float:left;
}

.form-group:nth-child(n+3) input, .form-group:nth-child(n+3) select {
  width:95%;
}