Question

为什么我的Bootstrap输入没有正确对齐（=＆gt;请参见带有占位符的第3个输入=＆＃39;不对齐＆＃39;）？
td表元素具有定义对齐的样式...
当我在设置输入样式text-align = right时从td元素中删除样式元素时，它仍然保持左对齐。

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

Answer 1

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

因为.form-control将来自bootstrap.min.css 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移动到另一个位置，您可以选择阻止这种情况发生。

Answer 2

这是因为您的输入通过display类将block属性设置为.form-control。块级元素将占用其包含元素的整个宽度。即使设置了宽度，剩余空间也会被保证金占用。

要使输入符合您希望的方式，请将display值更改为inline-block或将类.pull-right添加到输入中。

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

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

Answer 3

Twitter Bootstrap专门将width: 100%属性设置为.form-control，以便让生活更轻松，并使用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;
}

DEMO

需要注意的事项：

<table>在这种情况下不是一个好方法
内联style="到HTML标记并不是很好（即使它是一个演示）

希望这有帮助

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

3 个答案: