Bootstrap：按鈕沒有響應

Question

當我將瀏覽器調整到1120px以下時，我的按鈕出現問題，按鈕沒有響應。
我不知道如果我的代碼是錯誤的，或者如果我錯過了什麼別的
這是一張我的代碼（？）：

<!-- Main content --> 
    <section class="content"> 
    <div class="row" style="margin-top: 100px"> 
    <div class="col-lg-6" style="margin-top: 80px"> 
    <h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3> 
    <h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4> 
    </div> 
    <div class="col-lg-6"> 
     <div class="box box-default" style="margin-top: 80px;"> 
      <div class="box-header with-border" style="text-align: center;"> 
      <h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3> 
      </div> 
      <div class="box-body"> 
      <div class="row"> 
      <h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3> 
      <a href="#" class="btn btn-lg col-lg-10 col-lg-offset-1 btn-info" style="margin-bottom: 18px; letter-spacing: 3px; font-weight: 500">ADMIN</a><br> 
      <a href="#" class="btn btn-lg col-lg-10 col-lg-offset-1 btn-info" style="margin-bottom: 18px; letter-spacing: 3px;font-weight: 500">SISWA</a> 
      </div> 
      </div> 
      <!-- /.box-body --> 
     </div> 
     <!-- /.box --> 
    </div> 
    </dv> 
    </section> 
    <!-- /.content --> 

圖片1：超過1120px
圖二：下1120px

ss1 ss2

Answer 1

O基在課堂上，我假設你正在使用Bootstrap。如果是這樣的話，你可以在類col-xs-10 col-xs-offset-1添加到您的按鈕：

<a href="#" class="btn btn-lg col-xs-10 col-xs-offset-1 col-lg-10 col-lg-offset-1 btn-info" style="margin-bottom: 18px; letter-spacing: 3px; font-weight: 500">ADMIN</a><br> 
<a href="#" class="btn btn-lg col-xs-10 col-xs-offset-1 col-lg-10 col-lg-offset-1 btn-info" style="margin-bottom: 18px; letter-spacing: 3px;font-weight: 500">SISWA</a> 

以下是完整的片段，功能齊全：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <section class="content"> 
 
    <div class="row" style="margin-top: 100px"> 
 
    <div class="col-lg-6" style="margin-top: 80px"> 
 
    <h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3> 
 
    <h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4> 
 
    </div> 
 
    <div class="col-lg-6"> 
 
     <div class="box box-default" style="margin-top: 80px;"> 
 
      <div class="box-header with-border" style="text-align: center;"> 
 
      <h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3> 
 
      </div> 
 
      <div class="box-body"> 
 
      <div class="row"> 
 
      <h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3> 
 
      <a href="#" class="btn btn-lg col-xs-10 col-xs-offset-1 col-lg-10 col-lg-offset-1 btn-info" style="margin-bottom: 18px; letter-spacing: 3px; font-weight: 500">ADMIN</a><br> 
 
      <a href="#" class="btn btn-lg col-xs-10 col-xs-offset-1 col-lg-10 col-lg-offset-1 btn-info" style="margin-bottom: 18px; letter-spacing: 3px;font-weight: 500">SISWA</a> 
 
      </div> 
 
      </div> 
 
      <!-- /.box-body --> 
 
     </div> 
 
     <!-- /.box --> 
 
    </div> 
 
    </div> <!-- NOTE: I fixed a mis-closed div here --> 
 
    </section>

另外請注意，我固定一個錯誤封閉的div。