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
图2：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。

Bootstrap：按钮Aren没有响应

1 个答案: