html - Bootstrap : Button Aren't Responsive

Question

当我将浏览器调整到 1120 像素以下时，我的按钮出现问题，按钮没有响应。
我不知道我的代码是否有误，或者我是否遗漏了其他内容(?)
这是我的一段代码:

 <!-- 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 -->

pic 1 : more than 1120px
pic 2 : under 1120px

ss1 ss2

Answer 1

根据这些类，我假设您正在使用 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。