Question

ISSUE

使用twitter bootstrap 2.3.2有一个问题可以在下面看到。

HTML：

<body>
    <div class="container">
        <input class="span5" type="text" id="1" />  
        <span class="span3">...</span>
        <input class="span4" type="text" id="2" />
    </div>
</body>

对我来说，这应该是一个输入文本框，然后......然后是另一个输入文本框...但是，使用bootstrap它会使...成为输入，然后是另一个输入。

实施例

错误示例： jsFiddle

预期结果： jsFiddle

Answer 1

您在输入和省略号元素上使用的span类是块元素，并与Bootstraps网格系统一起使用来布局您的内容。

请参阅：http://getbootstrap.com/css/#grid

Answer 2

解决方案

添加样式float:left解决了由于span自动添加此浮动而导致的奇怪问题。

<强> HTML

<body>
    <div class="container">
        <input style="float:left;" class="span5" type="text" id="1" />  
        <span class="span3">...</span>
        <input style="float:left;" class="span4" type="text" id="2" />
    </div>
</body>

演示： jsFiddle

在两个<input />元素之间对齐<span> </span>

ISSUE

实施例

2 个答案:

解决方案