Система сетки бутстрапа, выстроившая две ярлыки рядом друг с другом

Я пытаюсь выяснить, как выровнять эти две метки и входы вместе. Кто-нибудь скажет мне, где я могу ошибиться? Я просто хочу, чтобы их выстроили рядом друг с другом.Система сетки бутстрапа, выстроившая две ярлыки рядом друг с другом

<div class="row"> 
    <div class="col-lg-12"> 
     <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label> 
      <div class="form-group"> 
       <div class="col-xs-4"> 
        <cfinclude template="../ddl/gender.cfm"> 
       </div> 
      </div> 
    </div> 
    <div class="col-lg-12"> 
     <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm"> 
      <div class="form-group"> 
       <div class="col-lg-1"> 
        <cfoutput> 
        <cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) ---> 
       </div> 
       <div class="col-lg-3"> 
        <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" /> 
        </cfoutput> 
        <span id="result_<cfoutput>#Add#</cfoutput>"></span> 
       </div> 
      </div> 
    </div> 
</div>

Как поставить номер лицензии водителя на той же линии, как секс?

EDIT

Изменение его Col-LG-6 ставит их на той же линии, но они до сих пор в конечном итоге выглядит как это? Я пытаюсь, чтобы они выглядели не так ужасно.

EDIT 2

<div class="row"> 
    <div class="col-lg-5"> 
     <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label> 
      <div class="form-group"> 
       <div class="col-lg-10"> 
        <cfinclude template="../ddl/gender.cfm"> 
       </div> 
      </div> 
    </div> 
    <div class="col-lg-7"> 
     <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm"> 
      <div class="form-group"> 
       <div class="col-lg-2"> 
        <cfoutput> 
        <cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) ---> 
       </div> 
       <div class="col-lg-5"> 
        <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" /> 
        </cfoutput> 
        <span id="result_<cfoutput>#Add#</cfoutput>"></span> 
       </div> 
      </div> 
    </div> 
</div>

Как удалить драйвер номер лицензии больше влево, чтобы сделать его лучше?

источник

2016-12-07 David Brierton

Вместо 'col-lg-12' try' col-lg-6' – j08691

Следуйте за документами: http://getbootstrap.com/css/#forms-horizontal – ZimSystem

@ j08691, которые помещают их в одну строку но пробелы огромны, и я хотел, чтобы выбор пола был такого же размера, как и над ним. –

Вы должны использовать классы col-lg-6 вместо col-lg-12, чтобы эти два элемента могли брать 6-6 столбцов. Таким образом, они могут вписаться в одну и ту же строку.

UPDATE:

<div class="row"> 
<div class="col-lg-4"> 
    <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label> 
     <div class="form-group"> 
      <div class="col-xs-4"> 
       <cfinclude template="../ddl/gender.cfm"> 
      </div> 
     </div> 
</div> 
<div class="col-lg-8"> 
    <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm"> 
     <div class="form-group"> 
      <div class="col-lg-4"> 
       <cfoutput> 
       <cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) ---> 
      </div> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" /> 
       </cfoutput> 
       <span id="result_<cfoutput>#Add#</cfoutput>"></span> 
      </div> 
     </div> 
</div>

источник

2016-12-07 20:51:10

Я понимаю это, но как я могу зайти в такой большой пробел и контролировать размер выбора, чтобы он соответствовал тому, что над ним? Выборы сокращаются, когда я использую менее 12 –

Это происходит потому, что с col-lg-6 вы занимаете половину виртуальных столбцов в макете. Тем не менее, вы используете только 1 + 3 столбца из своих 6 доступных для ваших элементов. Если вы хотите совместить существующий макет, вы можете использовать col-lg-4 и col-lg-8 вместо текущих классов col-lg-6, а в группе форм добавить col-lg-4, col-lg-4 к двум элементам. Или вы можете поместить раскрывающийся список, раскрывающийся список лицензии и текст в отдельные строки col-lg-4. Таким образом, они будут на равном расстоянии. –

Можете ли вы показать мне пример того, как должен выглядеть код –

Они оба 12 столбцов в ширину. Попробуйте сделать их 6, отсюда половина размера.

источник

2016-12-07 20:51:24

Я так понимаю, но как я могу зайти на такой большой пробел и контролировать размер выбора, чтобы он соответствовал тому, что над ним? Выбор меняет, когда я использую менее 12 –

Я не понимаю, что вы имеете в виду. Не могли бы вы лучше объяснить? –

выбор пола должен быть того же размера, что и на картинке над ним за месяц с даты рождения. Затем номер водительских удостоверений должен начинаться там, где выбрать расстояние до дня –

Система сетки бутстрапа, выстроившая две ярлыки рядом друг с другом

ответ

Смежные вопросы