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

Question

为什么我的Bootstrap输入没有正确对齐(=>请参阅第3个输入,占位符='不对齐')？
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将display: block来自bootstrap.min.css.作为证明,如果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到另一个位置,您可以选择防止这种情况发生.