【问题标题】:Aligning buttons next to a contact form对齐联系表单旁边的按钮
【发布时间】:2016-05-28 07:57:48
【问题描述】:

所以我试图对齐联系表单旁边的三个按钮。我将两者放在一个行类中,并将表单和按钮放在它们自己的 col-lg-6 中。但是,这些按钮不会在联系表单旁边对齐。无论我做什么,它们都会落在它下面。

我尝试添加

float: right; 

它的工作原理是将它们向右对齐,但仍位于表单下方。我会很感激任何帮助,谢谢!

Here's the link 到页面,联系表格+底部按钮。

【问题讨论】:

    标签: html css forms button


    【解决方案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>
    

    【讨论】:

    • 嘿,谢谢!我之前添加了一行,但显然没有正确放置。 :)
    猜你喜欢
    • 2014-12-01
    • 1970-01-01
    • 2013-07-25
    • 1970-01-01
    • 1970-01-01
    • 2020-05-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多