Question

我正在使用Bootstrap 3输入组尝试一种奇怪的行为。当我将一个输入组插件（文本或图标）添加到一个jumbotron内的表单时，输入组高度大于其输入高度。

在这里你可以找到一个JsFiddle和一个问题截图：

<div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div> 
        </form>
  </div>

http://jsfiddle.net/DTcHh/

的实例

屏幕截图： enter image description here

如何解决此问题？我正在寻找一个Bootstrap解决方案，但是如果你能帮助我用CSS规则修复它，那就不太可能了。

Answer 1

昨晚，我遇到了同样的问题。上面提到的修复都没有在我的上下文中工作。最后做的工作是将边距设置为0：

.input-group .form-control {
    margin: 0px !important;
}

也许这可以帮助有类似问题的人！

Answer 2

引导程序解决方案是将input-group-lg类添加到包含<div>的{{3}}，但是您会注意到插件仍然比输入略大，所以你可以调整<input>的高度来匹配;我添加了5 px：

shown in the documentation

Answer 3

.input-group-addon中.jumbotron尺寸的主要问题是它继承了font-size的 .jumbotron 。

通常，人们会尝试改变高度，最小高度或填充等。

然而不同大小的原因是.input-group中的.jumbotron继承 "font-size: 21px;"

您应该更改font-size NOT .input-group的{{1}}，如下所示。

.input-group-addon

Answer 4

以Adrift建议的方式查看Bootstrap的文档，您的原始代码看起来非常有效。如果你想要LARGE，那么添加input-group-lg类是很好的，但如果你不想，那就错了。使用IE9并在我自己的开发环境和Adrift的jsfiddle中运行你的代码，无论是否使用input-group-lg类，它都能正常工作（对我来说），当然除了它之外它渲染得很大。也许是浏览器特有的问题??

那就是说，我在尝试在选择器前面添加一个单选按钮时遇到了类似的问题。哦，好吧......

Answer 5

I fixed it be adding id="search_button" to my button:

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

I then applied the following style to my button:

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

That's all.

Answer 6

我刚遇到同一问题。

我通过修改adrift的答案来解决：

<div class="input-group input-group-fix">
   <div class="input-group-prepend">
      <span class="input-group-text" id="inputlbl-field1">field1</span>
   </div>
   <input id="field1" type="text" class="form-control" aria-label="field1" aria-describedby="inputlbl-field1" data-toggle="tooltip" data-placement="top">
</div>

然后添加以下CSS

.input-group-fix > .form-control, .input-group-fix > .input-group-addon, .input-group-fix > .input-group-btn > .btn {
    height: 43px;
}

这使我可以更好地控制其应用位置。

Answer 7

我在引导程序4中也遇到了同样的问题。然后我意识到我的css具有以下span标签设置：

 span {
            width: 100px;
            height: 100px;
            display: inline-block;
            background: #0c5460;
        }

因此，我的跨度很大。删除后，一切正常。

Answer 8

不要使输入更大，而是使span（input-group-addon）更小。为此，请将其填充降低。所以：

To exit type 'exit' or '^D'
> my @a=<a b c d e>
[a b c d e]
> my @b = <1 2 3 4 5 6 7>
[1 2 3 4 5 6 7]
> my @c = @a
[a b c d e]
> @c[3]
d
> @c[3]=3;
3
> @c
[a b c 3 e]
> @a
[a b c d e]
> @c === @a
False
> @c == @a
True          # this is unexpected, @c and @a should be different, right?
> my @x=@a.clone
[a b c d e]
> @x[3]=3
3
> @x
[a b c 3 e]
> @x === @a
False
> @x == @a
True         # unexpected, @x and @a should be distinct things, right?
>

使用Jumbotron容器在Bootstrap 3中输入大于输入的组

8 个答案: