2016-05-28 4 views
0

私は3つのボタンを連絡先フォームの横に整列しようとしています。私は、行クラスに両方を配置し、フォームとボタンを独自のcol-lg-6に配置しました。ただし、ボタンは連絡先フォームのすぐ隣に配置されません。私が何をしても、それらはその下に落ちる。連絡先フォームの横にあるボタンを整列する

私は

float: right; 

を追加しようと、それは右に、まだフォームの下にそれらを整列させることにより動作します。私は助けていただきありがとうございます、ありがとう!

Here's the linkページには、下部に連絡フォーム+ボタンがあります。

答えて

1

は、同じ行の下に追加します。

<div class="container-fluid"> 
<div class="row"> 
<div class="col-lg-6"> 
    <div class="container shapef"> 
    <form class="well form-horizontal" action=" " method="post" id="contact_form"> 
     <fieldset> 

     <br> 

     <div class="form-group"> 
      <label class="col-md-2 control-label">Name</label> 
      <div class="col-md-9 inputGroupContainer"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
       <input name="name" placeholder="Name" class="form-control" type="text"> 
      </div> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-md-2 control-label">Email</label> 
      <div class="col-md-9 inputGroupContainer"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> 
       <input name="email" placeholder="Email Address" class="form-control" type="text"> 
      </div> 
      </div> 
     </div> 


     <div class="form-group"> 
      <label class="col-md-2 control-label">Message</label> 
      <div class="col-md-9 inputGroupContainer"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span> 
       <textarea class="form-control" name="comment" placeholder="Message"></textarea> 
      </div> 
      </div> 
     </div> 

     <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting me, I'll get back to you shortly.</div> 

     <!-- Button --> 
     <div class="form-group"> 
      <label class="col-md-2 control-label"></label> 
      <div class="col-md-4"> 
      <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button> 
      </div> 
     </div> 

     </fieldset> 
    </form> 
    </div> 
</div> 
<div class="col-lg-6 kopcheta"> 
       <ul class="list-inline banner-social-buttons"> 

         <li> 
          <a href="https://github.com/l-emi" target="_blank" class="btn btn-default btn-lg btn-warning"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a> 
         </li> 
         <li> 
          <a href="https://uk.linkedin.com/in/lidiya-nikolova-b979348b" target="_blank" class="btn btn-default btn-lg btn-warning"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a> 
         </li> 
         <li> 
          <a href="https://www.freecodecamp.com/l-emi" target="_blank" class="btn btn-default btn-lg btn-warning"><i class="fa fa-fire fa-fw"></i> <span class="network-name">FreeCodeCamp</span></a> 
         </li> 

       </ul> 
      </div> 
<!-- /.container --> 
</div> 
</div> 
</div> 
+0

ちょっと感謝!前に行を追加しましたが、明らかに適切に配置していませんでした。 :) –

関連する問題