html - 将文本框标签与文本框对齐

Question

我正在使用 Bootstrap 。我希望 input 的文本 label 在文本框边缘的左侧对齐，而不是像现在这样在中心上方对齐。

这是用 bootstrap 完成的吗？

编辑:抱歉，代码片段没有正确显示我的问题，所以我在 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>

Answer 1

编辑:

我在这里更新了你的 fiddle - https://jsfiddle.net/Lfmxt3kv/1/

如果您必须在父容器上使用 text-center，那么您需要在标签和输入元素周围放置一个包装器 div。以下是我对 fiddle 所做的更改:

<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>