bootstrap 对齐按钮旁边的文本框出现问题

Question

我正在尝试构建我在图像中附加的内容，但不幸的是我无法正确放置它，到目前为止这是我的 HTML（我是 bootstrap 的新手）

<div class="row">
  <div class="container">
    <div class="col-lg-3">
    </div>
    <div class="col-lg-6">
        <p class="text-center">
            <strong>Enter your email and get special information</strong>
        </p>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-inline col-lg-12" }))
        {
            <div class="input-group col-lg-9" style="margin-left: 3%">
                <input type="text" class="form-control">
            </div>
            <div class="input-group col-lg-2">
                <button class="btn btn-primary">Submit</button>
            </div>
        }
    </div>
    <div class="col-lg-3">

    </div>
 </div>
</div>

应该看起来像这样

但看起来像这样，理想情况下我希望按钮更靠近文本框

但是当我在手机屏幕上查看它时，我发现一团糟

如有任何帮助，我们将不胜感激。

Answer 1

这个怎么样？

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>

Answer 2

这个怎么样fiddle:

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".

bootstrap 对齐按钮旁边的文本框出现问题

Issue with bootstrap aligning textbox next to button

html

css

twitter-bootstrap

twitter-bootstrap-3