Question

我在bootstrap3中遇到水平格式问题。

只要标签文本不太长，标签按钮的对齐就可以了。只要复选框后面有一些文字，label-checkbox的对齐就可以了。

工作示例：

 <form class="form-horizontal"> 
  <fieldset>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
   <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Download excel file.</label>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
  <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <div class="checkbox-inline">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>

现在，当我添加更长的标签并且在复选框后面不包含任何文字时，对齐会变得混乱：

<form class="form-horizontal"> 
  <fieldset>
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
   <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Download excel file bdhjfjsdhbfjshdb sjdhfhjsdhfhjgsdb</label>
    <div class="col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
  <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <div class="checkbox-inline">
        <label>
          <input type="checkbox">
        </label>
      </div>
    </div>

您可以清楚地看到Sing In按钮比标签高一点，复选框略低于标签。

我不明白为什么会这样，我需要第二种形式看起来很正常。我希望有人可以帮助我。

Answer 1

您可以清楚地看到Sing In按钮略高于标签

默认情况下它是如何工作的，因为<label>中定义了顶部填充。请注意该按钮如何位于原始图像帖子中的标签上方。

http://getbootstrap.com/css/#checkboxes-and-radios

在删除Remember me文字时，您不再内联任何内容。因此，要正确对齐元素，请使用Bootstrap的checkbox类而不是checkbox-inline。

  <div class="col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox">
      </label>
    </div>
  </div>

这是一个小提琴，供您查看。 http://jsfiddle.net/h2bztdtt/2/

Answer 2

看起来你很亲密。我无法重新创建关闭的复选框，因此请检查您可能编写的任何CSS。通过在按钮顶部放置7px的边距，我能够将所有内容排成一行。

表单元素错误对齐，bootstrap3

2 个答案: