Question

以下是表单的代码：

<div class="container-full">

      <div class="jumbotron text-center" style="background-color:transparent; margin:auto">
        <form name="verifyForm" ng-submit="submitForm()" novalidate>
           <div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
               <input type="text" class="form-control" placeholder="Username" style="min-width:15em">
                  <span class="input-group-addon">
                                <button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff">
            > 
          </button></span>
           </div> 
        </form>
      </div>

我遇到的问题是当我向按钮组添加一个按钮时，它比输入框大：

如何阻止这种情况发生？感谢

Answer 1

尝试为这些输入和按钮元素添加form-group。

类似

<form name="verifyForm" ng-submit="submitForm()" novalidate>
       <div class="input-group input-group-lg col-xs-1" style="margin: auto;" ng-class="{'has-error': verifyForm.verifyCode.$invalid}">
          <div class="form-group">
             <input type="text" class="form-control" placeholder="Username" style="min-width:15em">
          </div>
         <div class="form-group">
            <span class="input-group-addon">
                <button id="filter" class="btn btn-primary btn-block" onclick="submitForm();" style="background-color:#6e5cbf; color: #ffffff"></button>
            </span>
         </div>
       </div>
    </form>

它将区分这两个块，你可以在那个

之上编写cutom类

Answer 2

您的button有类.btn，其格式如下：

.btn{
    display: inline-block;
    padding: 6px 12px; //this is what making it to extend space
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143; //and this too
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

因此，解决方法将覆盖这些属性。在按钮上添加一个类“特殊”并覆盖以下属性：

.special{
    padding:0px !important;
    line-height:1
}

<强> DEMO

Answer 3

为什么每个人都使其变得复杂？放这个，你们都会没事的。

此：

<input class="btn btn-outline-primary form-control-sm" type="button" Value="Send" />

代替：

<button class="btn btn-outline-primary form-control-sm">Send</button>

景气。我们完成了。

输入组按钮比使用Jumbotron容器的Bootstrap 3中的输入大

3 个答案: