Twitter bootstrap - 在彼此相邻放置时重叠的前置输入元素

Posted 2023-04-18

【中文标题】Twitter bootstrap - 在彼此相邻放置时重叠的前置输入元素

【英文标题】：Twitter bootstrap - prepended input elements overlapping when placed next to each other

【发布时间】：2013-02-01 20:26:04

【问题描述】：

我正在尝试使用 display:table 样式将两个输入元素彼此相邻放置，并在第一个输入上添加一个前置项。但是，这会导致第二个输入元素与第一个重叠。我试过使用 box-sizing:border-box 没有运气。似乎问题是我限制了父 div 的宽度，然后将输入元素的宽度设置为 100%，以便它填满父元素，但这根本不起作用。这是一个 JSfiddle 示例：

html

<div class="container">
    <div class="row">
        <div class="cell input-prepend">
            <span class="add-on">HI</span>
            <input type="text" />
        </div>
        <div class="cell">
            <input type="number"/>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container 
    margin-top: 10px;


.row 
    display: table-row;
    width: 100px;


input[type=text] 
    width: 100%;


.cell 
    display: table-cell;

http://jsfiddle.net/5pgPY/7/

我们的目标是得到一堆像上面这样的行，其中文本输入的每个实例都有一些宽度可能不同的标签，所以我需要一些方法来确保文本输入全部对齐。也许我应该放弃使用前置元素并为此使用单独的 div？

【参考方案1】：

看不出问题出在哪里。无论如何，这对我有用：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container 
    margin-top: 10px;


.row 
    display: table-row;
    width: 200px;


input[type=text] 
    width: 100%;


.cell 
    margin-right: 60px;
    float: left;

【讨论】：

嗯，添加的边距权限确实有效，我认为这可能是正确的解决方案。

即使它在这种情况下有效，我不确定它是否更像是一种解决方法而不是一般解决方案......

是的，这是一种解决方法，但它比其他解决方案更理智。虽然我真的很想这个应用程序做一些极端的事情并隐藏输入字段并通过将内容镜像到 div 来做一些诡计，因为调整大小和定位它们真的很烦人。

【参考方案2】：

在您的示例中，您没有在第二个输入中使用 input-prepend 类，您应该按如下方式编写它

<div class="cell input-prepend">
        <input type="number"/>
    </div>

并且在 css 中从输入中移除 width=100% 并使用 margin-right

    input[type=text] 
       margin-right:10px;

      

你能检查一下 JSfidlle updated JSfiddle prepend

<div class="container">
<div class="row">
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
</div>
</div>

【讨论】：

我需要它们彼此相邻，您是错过了问题的那一部分还是我错过了什么？哦，这取决于我的浏览器的宽度......实际上我不想要那个，而且我不知道你会如何堆叠多行，所以我认为这不能解决它。

哦，嗯，我猜多行确实有效，但我不确定我明白为什么。看，当您尝试限制第一个输入容器的宽度时，您会得到我所说的情况：jsfiddle.net/mh3hH/19

看到那是因为浏览器正在调整大小，并使其适合可见区域，它们都以这种方式堆叠起来.. 你可以做的是编写媒体查询，然后相应地重新排列它们，情况将一定会解决的。

让我们continue this discussion in chat