Проблема с бутстрапом, выравнивающим текстовое поле рядом с кнопкой

Question

Я пытаюсь создать то, что я прикрепил к изображению, но, к сожалению, я не могу заставить его сидеть прямо, до сих пор это мой HTML (я новичок в загрузке)

<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/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; 
    } 

Причина, почему он отображается отличается от мобильного браузера является его отзывчивость

класса =» 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>