Question

我在表列中输入bootstrap form-control时遇到问题。我不希望它在彼此的级联上，但我希望它像桌子行一样水平堆叠。

以下是问题代码：

        <td colspan="4">
         a:
         <input class="form-control" id="a" type="text" value="a" />                
         b:
         <input class="form-control" id="a" type="text" value="a" />                  
        </td>

以下是查看问题的示例。

http://jsfiddle.net/gV6y8/27/

Answer 1

您的代码中存在一些问题，您应该在form-group类中包装输入，form-control也会自动占用100％的宽度。此外，听起来您希望使用form-inline。

试试这个：

HTML：

首先更改：添加form-inline类

<table id="paymenttable" class="table table-condensed form-inline">

第二次更改：添加form-group并更改form-control

的宽度

<td colspan="4">
    <div class="form-group">
        a:
        <input class="form-control table-input" id="a" type="text" value="a" />        
        b:
        <input class="form-control table-input" id="a" type="text" value="a" />                 
    </div>
</td>

添加到您的CSS：

.table-input {
    width:40%;
}

Updated fiddle

bootstrap输入表单控件水平显示比级联

1 个答案: