Bootstrap 3 — пространство между входами с иконками и нестандартной шириной

Я столкнулся с проблемой, с которой не знаю, как справиться. Я работаю над BootStrap 3 и пытаюсь сделать некоторые встроенные формы, потому что это более удобно для пользователя, чем полная вертикальная форма (я не хочу прокручивать вечно)

Я нашел какой-то способ встроить обычные входы, но когда дело доходит до ввода со значками (font awesome), я могу понять, как их встроить, но они встраиваются бок о бок без пробела между ними. Кроме того, я не понимаю, как изменить их ширину, как при обычном вводе (например, col-sm-4).

Я хотел бы, чтобы «Электронная почта» и «Телефон» были экранированы и изменены их ширина

Пожалуйста, взгляните на мой код и следующее изображение, поясняющее его: http://www.bootply.com/T8w3oRE3Sn< /а>

введите здесь описание изображения


icons input css twitter-bootstrap adminlte
person Ezhno    schedule 25.04.2017    source источник
comment
какой выход вам нужен? Вы можете поделиться изображением этого?   -  person Sahil Dhir    schedule 25.04.2017
comment
@SahilDhir Я добавил изображение, чтобы показать вывод   -  person Ezhno    schedule 25.04.2017

Ответы (3)


arrow_upward
3
arrow_downward

Вы пропустили кое-что в группе форм, так что я все закруглил. Hope it will help you :)

Ниже приведен рабочий фрагмент:

.myform .form-inline .input-group .input-group-addon{ width:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row myform">
  <div class="col-xs-12">
    <form name="myform" role="form" novalidate>

      <div class="form-inline ">
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            <input type="email" class="form-control" placeholder="Email de l'interlocuteur">
          </div>
        </div>
        <div class="form-group col-xs-6">
          <div class="input-group col-xs-12">
            <span class="input-group-addon"><i class="fa fa-phone"></i></span>
            <input type="email" class="form-control" placeholder="Téléphone de l'interlocuteur">
          </div>
        </div>
      </div>

    </form>
  </div>

</div>

person Sahil Dhir    schedule 25.04.2017
comment
Спасибо, Сахил, я посмотрю на это, но, видимо, это именно то, что я искал :) - person Ezhno; 25.04.2017
comment
Да, пожалуйста, посмотрите и скажите мне, нужна ли вам помощь в этом - person Sahil Dhir; 25.04.2017
comment
У меня как минимум один вопрос, если не возражаете. Зачем использовать col-xsвместо col-sm. Я пробовал с col-sm, но это не работает, и пробел исчезает - person Ezhno; 25.04.2017
comment
col-xs сделает его отзывчивым для всех устройств ширины... Также я обновляю свой ответ для совместимости всех устройств. - person Sahil Dhir; 25.04.2017
comment
Понял. И есть ли способ сделать пространство больше/меньше? - person Ezhno; 25.04.2017
comment
Обновил мой ответ, указав небольшой пользовательский CSS. Теперь он совместим со всеми устройствами (настольными компьютерами, ноутбуками, планшетами, мобильными телефонами). - person Sahil Dhir; 25.04.2017
comment
Спасибо за помощь ! - person Ezhno; 25.04.2017

arrow_upward
0
arrow_downward

Попробуйте это

ЕСЛИ вы видите его на большом экране, он будет встроенным. Вы должны использовать класс form-inline, чтобы сделать форму встроенной.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

person LKG    schedule 25.04.2017

arrow_upward
-2
arrow_downward

Вам просто нужно иметь дело с хорошим пониманием системы сетки начальной загрузки.

<div class="form-group row">
              <label for="inputEmail3" class="col-sm-1 control-label">Interlocuteur</label>

              <div class="col-sm-2">
                <input type="text" class="form-control" id="inputEmail3">
              </div>

              <label for="inputEmail5" class="col-sm-1 control-label">Poste</label>

              <div class="col-sm-2">
                <input type="text" class="form-control" id="inputEmail5" placeholder="DeInterlocuteur">
              </div>

person Tejas R    schedule 25.04.2017
comment
Теджас, я на самом деле просил два входа: электронная почта и телефон. - person Ezhno; 25.04.2017