引导程序对齐按钮旁边的文本框的问题

Answer 1

这个小提琴怎么样：

http://jsfiddle.net/jwyr6Lwh/1/

    .custom input.form-control {
        border: 1px solid #848484; 
        -webkit-border-radius: 30px !important; 
        -moz-border-radius: 30px !important; 
        border-radius: 30px !important;
        -moz-box-shadow: 2px 2px 1px #666;
        -webkit-box-shadow: 2px 2px 1px #666;
        box-shadow: 2px 2px 1px #666;
        outline:0; 
        padding-left:10px; 
        padding-right:0px; 
        background-color: rgba(255,255,255,0.2);

    } 

    .custom  button {
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }

在移动浏览器上显示不同的原因是它的响应能力

class="col-lg-2"

意味着在大型设备上它将显示在两列中，否则一列在另一列下面。如果您不打算这样做，请采取

class="col-sg-2"

。

Answer 2

这个怎么样？

http://jsfiddle.net/ytn7z6tc/4/

<h3 id="btn-groups-single">Input + Button</h3>        
<div class="input-group">
  <input type="text" class="form-control " placeholder="email address">

  <div class="input-group-btn">
    <button type="button" class="btn btn-primary">
      Submit

    </button>

  </div>

</div>