Question

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

这是用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

编辑：

我在这里更新了你的小提琴 - 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>

Answer 2

您正在寻找Bootstrap forms

单个表单控件自动接收一些全局样式。所有文字<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>

Answer 3

要快速修复，你可以在div中添加一个类..

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

然后在css中做

.textalign { text-align: left; }

将文本框标签与文本框

3 个答案:

编辑：

段