выравнивание метки текстового поля с текстовым полем

Я использую bootstrap. Я хочу, чтобы текст labels для inputS был выровнен слева от края текстовых полей, а не выше в центре, как сейчас.

Это что-то, что делается с bootstrap?

EDIT : Извините, что фрагмент кода не показал мою проблему должным образом, поэтому я переделал его в jsFiddle. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-center col-xs-12  ">
  <div class="row">
  </div>
  <div class="row ">
    <div class="col-xs-6 ">
      <label for="companyInput">LABEL</label>
      <br />
      <input id="companyInput" type="text">
    </div>
    <div class="col-xs-6 ">
      LABEL
      <br />
      <input id="cardInput" type="text" />
    </div>
  </div>
</div>
3 2
html css twitter-bootstrap twitter-bootstrap-3

3 ответа:

Правка:

Я обновил вашу скрипку, вот - https://jsfiddle.net/Lfmxt3kv/1/

Если вы должны иметь text-center на родительском контейнере, то вам понадобится обертка div вокруг вашей метки и входного элемента. Вот изменения, которые я внес в скрипку: 

<div class="text-center col-xs-12">
  <div class="row ">
    <div class="col-xs-6 ">
      <!-- .input-wrapper needs to be wrapped around both the label and input element -->
      <div class="input-wrapper">
        <label for="companyInput">LABEL</label>
        <input id="companyInput" type="text">
      </div>
    </div>
    <div class="col-xs-6 ">
      <div class="input-wrapper">
        <label for="cardInput">LABEL</label>
        <input id="cardInput" type="text" />
      </div>
    </div>
  </div>
</div>

.input-wrapper {
  display: inline-block;
  text-align: left;
}

.input-wrapper label {
  display: block;
}

просто добавляю text-left похоже, это работает. 

<div class="col-sm-6 text-left">
  LABEL ONE
  <br />
  <input id="companyInput" type="text" placeholder="Företag... (1-100)">
</div>
3

Вы ищете загрузочные формы

Отдельные элементы управления формой автоматически получают некоторый глобальный стиль. Все текстуальные <input>, <textarea>, и <select> элементы с По умолчанию .form-control имеют значение width: 100%;. Оберните этикетки и управление в .form-group для оптимального расстояния.

Для того, что вы хотите, вам нужно display:inline-block .form-group и добавить класс text-left, чтобы выровнять влево, потому что .container имеет text-center

Фрагмент 

.form-group {
  display: inline-block
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="text-center container">
  <div class="row">
    <div class="col-xs-12">
      <form class="form">
        <div class="form-group text-left">
          <label for="companyInput">Company</label>
          <input class="form-control" id="companyInput" type="text" placeholder="Företag... (1-100)">
        </div>
        <div class="form-group text-left">
          <label for="cardInput">Card</label>
          <input class="form-control" id="cardInput" type="text" placeholder="Kort... (1-100)" />
        </div>
      </form>
    </div>
  </div>
</div>
1

Для быстрого исправления можно добавить класс в div..

<div class="textalign col-span-6">

Тогда в css просто сделайте 

.textalign { text-align: left; }
0