html - 如何使用 Bootstrap 中的按钮移至页面底部

Question

我试图在页面顶部添加按钮，并在底部添加一个表单，当我单击按钮时，它应该在同一页面上的表单位置下降。我不知道如何才能做到这一点。

这是我的按钮代码

 <div class="col-xs-12 col-sm-2">
                     <p style="padding:40px;"></p>
                <button class="btn btn-block btn-warning">Reserve Table</button>
                </div>

这是我的表单代码

<div class="col-xs-6 col-sm-3">
                <div class="form-vertical" role="form">
                      <p style="padding:10px;"></p>
                    <h3>Table Reservation</h3>
             </div>
        </div>
          <div class="col-xs-6 col-sm-9">
                <div class="form-horizontal" role="form">
                      <div class="form-group">
                <label for="Number" class="col-sm-2 control-label">Number of people</label>  
                   <label class="radio-inline">
                       <input type="radio" name="optradio">1
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="optradio">2
                    </label>
                <label class="radio-inline">
                    <input type="radio" name="optradio">3
                </label>
                           <label class="radio-inline">
                    <input type="radio" name="optradio">4
                </label>
                           <label class="radio-inline">
                    <input type="radio" name="optradio">5
                </label>
                           <label class="radio-inline">
                    <input type="radio" name="optradio">6
                </label>
                    </div>
                <div class="form-group has-feedback">
                 <label for="Date-time" class="col-sm-2 control-label">Date &amp; Time</label>  
                    <div class="col-sm-3">
          
                <input type="text" class="form-control pull-left" name="Date-time" placeholder="date">
                          <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
                        </div>
                        
                     <div class="form-group  has-feedback">
                 
                              <div class="col-sm-3">
                <input type="text" class="form-control"  placeholder="time">
                          <i class="glyphicon glyphicon-time form-control-feedback"></i>
                        </div>
                        </div>
                    <div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  Please <strong ><a href="tel:81343444" style="color:black">call</a></strong> for bookinng of more than 6 people.
</div>
                    </div>
             </div>

请告诉我该怎么做？

Answer 1

你好@lomesh shah，这很简单。

步骤 1

首先给该表单一个id，例如

<form id="testform"> rest of the code goes here </form>

步骤 2

您必须使用 anchor 标记而不是按钮，但通过在其上使用 bootstrap 的 btn 类，您可以给它一个按钮外观，然后在 href 内使用表单的 id，单击它将带您进入表单。请参阅下面的代码

<a href="#testform" class="btn btn-block btn-warning">Go to form</a>

困惑？回击我:)我会回复