Загрузите несколько ярлыков и введите их в одну строку

Я пытаюсь разместить две метки и два входа в одной строке. Возможно ли это?Загрузите несколько ярлыков и введите их в одну строку

Я хочу, чтобы это выглядело, как это все на той же строке:

[Ярлык] [Вход] [Кнопка] Пробел [Label2] [Input2]

То, что я до сих пор

<form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
     <input type="text" id="inputEmail" placeholder="Email"> 
     <span class="input-group-btn "> 
     <button type="button" class="btn" data-ng-click="click()">...</button> 
     </span> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
    <div class="controls"> 
     <input type="password" id="inputPassword" placeholder="Password"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox"> 
     <input type="checkbox"> Remember me 
     </label> 
     <button type="submit" class="btn">Sign in</button> 
    </div> 
    </div> 
</form>

источник

2015-12-15 Terrance Jackson

@ Ответ IamRaviteja - это правильный способ сделать это. Кроме того, посмотрите на [сайт Bootstrap] (http://getbootstrap.com/components/#input-groups) для получения дополнительных примеров. –

Это может помочь вам

<div class="col-md-6 col-xs-6"> 
    <div class="input-group"> 
    <span class="input-group-addon">Your label</span> 
     <input type="text" class="form-control" placeholder="Search for..."> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
    </div><!-- /input-group --> 
    </div> 
    <div class="col-md-6 col-xs-6"> 
    <div class="input-group"> 
    <span class="input-group-addon">Your label</span> 
    <input type="text" class="form-control"> 
</div> 
    </div>

скрипку here

источник

2015-12-15 15:09:08 Raviteja

Спасибо, что этот бутстрап действительно ломает мой мозг. –

Итак, есть ли способ сделать это без моих ярлыков, похожих на кнопку? В основном этикетка без рамки. Когда аддон имеет границу, похоже, создается впечатление, что поле является текстовым полем и редактируется, когда это всего лишь метка –

, можете ли вы объяснить, как вы хотите показать? – Raviteja

Решение Raviteja хорошо, но следующий код создаст форму, указанную в комментарии («без моих меток, похожих на кнопку»). Используется Bootstrap 3.3.7.

<form class="form-inline"> 
<div class="form-group"> 
    <label class="form-label">Email</label> 
    <input type="email" class="form-control"> 
    <button class="btn btn-default" type="button">Go!</button> 
</div> 

<div class="form-group" style="margin-left:30px"> 
    <label class="form-label">Password</label> 
    <input type="password" class="form-control"> 
</div> 

<div class="form-group" style="margin-left:30px"> 
    <div class="checkbox"> 
    <label><input type="checkbox">Remember me</label> 
    </div> 
</div> 
</form>"

источник

2017-04-16 18:56:41 addmoss

Загрузите несколько ярлыков и введите их в одну строку

ответ

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