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


我正在用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规则修复它,那将是不可能的。


27
2017-09-02 15:34


起源




答案:


引导解决方案是添加 input-group-lg 关于包含的类 <div>  - 作为 文档中显示,但你会注意到插件仍然比输入略大,所以你可以调整高度 <input> 匹配;我添加了5 px:

http://jsfiddle.net/DTcHh/21/


18
2017-09-02 15:45



它仍然不太正确(在bootstrap 3.0.3中关闭px)。我对hosang解决问题的解决方案可能更好 - Thomas Dignan
@TomDignan:我同意这是更好的解决方案;如果OP取消接受,我将删除此答案。 - Adrift
太棒了,对我来说很完美!! - GedankenNebel


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

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

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


27
2018-06-14 10:29



谢谢发布吧!拯救我的生命:P继续这个:) - Line
我不知道你是怎么找到的但是你是一个很棒的家伙!非常感谢。 - Milad
太棒了!我一直在工作几个小时。 - Jarrel09
嗯,这对我来说也不起作用 - 插件的大小仍然不成比例。我最终使用了 输入基的BTN。 - Anupam
谢谢兄弟,你节省了我的时间 - Tejas Mehta


主要问题 .input-group-addon 大小 .jumbotron 就是它继承了 font-size 的 .jumbotron

通常,人们试图改变高度,最小高度或填充等。

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

你应该改变 font-size 的 .input-group    .input-group-addon 如下。

.input-group { font-size: 14px !important; }

10
2017-11-24 09:02





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

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


2
2017-09-20 16:07





我修好了补充 id="search_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>

然后我将以下样式应用于我的按钮:

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

就这样。


0
2017-09-14 15:41





而不是使输入更大,使跨度(输入组 - 插件)更小。为此,请将其填充降低。所以:

.input-group-addon {
    padding: 0px 6px;
}

-1
2017-11-29 23:01