为什么我的Bootstrap输入框不能右对齐？

Question

为什么我的Bootstrap输入框不能向右对齐（=>请看带有placeholder='Does not align right'的第3个输入框）？
td表格元素具有定义对齐方式的样式...
当我从td元素中删除样式元素并将输入框样式text-align=right设置为右对齐时，它仍然是左对齐的。

<div class="row">
    <div class="col-md-6">
        <div class="well" style="width:840px">
            <table class='table borderless' style="width:800px">
            <tr>
                <td colspan="2">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
                </td>
            </tr>
            <tr>
            </table>
        </div>
    </div>
</div>

- udgru

Answer 1

为什么我的Bootstrap输入框无法右对齐？

因为从bootstrap.min.css中，.form-control 的属性是 display: block。如果你将其改回成 inline-block，它就能正常工作了。

.form-control { display: inline-block !important; }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="row">
    <div class="col-md-6">
        <div class="well" style="width:840px">
            <table class='table borderless' style="width:800px">
            <tr>
                <td colspan="2">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right">
                    <input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
                </td>
            </tr>
            <tr>
            </table>
        </div>
    </div>
</div>

你可能真正想要的是控件立即像那样工作。为了实现这一点，请确保利用Bootstrap的form-inline，比如像这样：

<div class="row form-inline">

请注意，这也会影响第一行输入框。如果您将 form-inline 移到其他位置，您可以选择防止发生这种情况。

- Jeroen

---

为什么当我把<hr style="widdth:100px">标签放在最后一个输入框下面时，它也不能正确对齐，即使我采纳了您的建议？ - udgru

我不确定你的意思，也许你在问一个新问题？在你发布的问题中没有hr。无论如何，这可能是出于类似的原因：hr往往是一个块级元素，因此占据整个宽度。如果您设置了显式宽度，则实际可视化的行可能会变为100px，但hr元素所包含的块是全宽的，因此没有“文本对齐”的概念。 - Jeroen

如上所述，hr 的可视宽度将为100像素，但仍将占据其包含元素的全部宽度，因为剩余的宽度成为自动计算的 margin 量。在 Chrome 或 FF 中使用开发者工具检查 hr，您将看到在设置特定宽度时添加的 margin。当宽度小于包含元素时，会添加此 margin。 - hungerstar

Answer 2

那是因为你的输入框通过 .form-control 类设置了它的 display 属性为 block。块级元素将占据其包含元素的整个宽度。即使设置了宽度，剩余的空间也会被边距占用。

要使输入框按您想要的方式对齐，可以将 display 值更改为 inline-block，或将类 .pull-right 添加到输入框中。

.form-control {
    display: inline-block;
}

<input type="text" class="form-control input-sm pull-right">

- hungerstar

Answer 3

Twitter Bootstrap 专门为 .form-control 设置了 width: 100% 属性，以使生活更加轻松，并使用 Grid system 处理此类事情

您可以选择以下解决方案

HTML 标记

<div class="row">
  <div class="col-md-9 is-centered">
    <div class="well well-form">
     <!-- Two inline input fields per row -->
     <div class="row">
      <div class="col-sm-6 form-group">
       <input class="form-control input-sm" type="text" name="input1" placeholder="Input 1">
      </div>
      <div class="col-sm-6 form-group">
       <input class="form-control input-sm" type="text" name="input2" placeholder="Input 2">
      </div>
     </div>
     <div class="row has-border">
      <div class="col-sm-12">
       <!-- Single input fields per row (pushed to the right) -->
       <div class="row">
       <div class="col-sm-6 pull-right">
        <input class="form-control input-sm" type="text" name="input3" placeholder="align to right">
       </div>
      </div>
      </div>
    </div>
   </div>
  </div>
</div>

辅助函数（可选）

SCSS

[class*="col-"] {
 &.is-centered {
    float: none;
    margin-right: auto;
    margin-left: auto;
  } 
}

.well-form {
  > .row {
    padding-top: 8px;
    border-top: 1px solid #ddd;
  }
  .form-group {
    margin-bottom: 8px;
  }
}

CSS

[class*="col-"].is-centered {
  float: none;
  margin-right: auto;
  margin-left: auto;
}

.well-form > .row {
  padding-top: 8px;
  border-top: 1px solid #ddd;
}
.well-form .form-group {
  margin-bottom: 8px;
}

演示

注意几点：

• <table>在这种情况下不是一个好的方法
• 内联style="对HTML标签来说一点都不好（即使是演示）

希望这能帮到你

- Mahmoud