2016-01-20 5 views
0

есть проблема с aliging форм ...Форма Выравнивание вопроса | Bootstrap

Вот что я пытаюсь сделать ... сделать контактную форму слева и справа поставить логотип компании ..

Так две дивы из COL-MD-6 выполнены .. на первый DIV я ставлю форму с классом «форм-горизонтальный»

Поэтому я устраивая форма этикетки в «Col-мкр-2 "и поля формы в" col-md-4 "

Но эти формы этикеток и полей идут бок о бок ... проверьте изображение ...

enter image description here

Вот код ...

<section id="contact"> 

    <div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div> 

     <div class="col-md-6"> 

      <div style="font-family:'MV Boli'; font-size: 20px;"> 

       <h4>Reach Us</h4> 

        <form class="form-horizontal"> 

         <div class="form-group"> 

          <label for="name" class="col-md-2 control-label">Name</label> 

          <div class="col-md-4"> 

           <input type="text" name="name" placeholder="Your name" class="form-control"> 

          </div> 



          <label for="email" class="col-md-2 control-label">E-Mail</label> 

          <div class="col-md-4"> 

           <input type="email" name="email" placeholder="Your E-Mail" class="form-control"> 

          </div> 

         </div> 

        </form> 



      </div> 

     </div> 

     <div class="col-md-6"> 


      <img src="images/logo-vertical.png" class="img-thumbnail"> 


     </div> 

<section> 

Пожалуйста, помогите людям, на грани закрытия мой первый веб-дизайн-проект :)

ответ

0

Вам не нужно сделайте контейнер col-md-12 для вашей формы и изображения. Просто сделайте равную структуру

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
     form here 
    </div> 
    <div class-"col-md-6"> 
     // your image 
    </div> 
    </div> 
</div> 
1

Я думаю, что это ваша потребность. Пожалуйста, попробуйте это, это не ваша просьба, пожалуйста, дайте мне ясный ввод,

<section id="contact"> 

    <div class="col-md-12 text-center" style="background-image: url('images/head-background.png'); height: 100px; margin: 120px 0 10px 0;"><h2 style="margin-top:40px;">Contact Us</h2></div> 

     <div class="col-md-6"> 

      <div style="font-family:'MV Boli'; font-size: 20px;"> 

       <h4>Reach Us</h4> 

        <form class="form-horizontal"> 

         <div class="form-group"> 

          <label for="name" class="col-md-2 control-label">Name</label> 

          <div class="col-md-12"> 

           <input type="text" name="name" placeholder="Your name" class="form-control"> 

          </div> 



          <label for="email" class="col-md-2 control-label">E-Mail</label> 

          <div class="col-md-12"> 

           <input type="email" name="email" placeholder="Your E-Mail" class="form-control"> 

          </div> 

         </div> 

        </form> 



      </div> 

     </div> 

     <div class="col-md-6"> 


      <img src="images/logo-vertical.png" class="img-thumbnail"> 


     </div> 

<section> 
Смежные вопросы