Bootstrap 4:使用按钮创建响应式Float类

时间:2017-12-23 10:13:44

标签: html css twitter-bootstrap bootstrap-4

当我使用float类堆叠按钮时,我的响应能力有问题。我希望我的所有按钮都贴在内容的末尾。

body {
  background-color: #eeeeee;
}

.bg-a {
  background-color: #bbb;
  color: #fff;
  padding: 3 6px;
  margin: 0 5px;
}

#img-top1,
#img-top2,
#img-top3 {
  border-radius: 0;
}

header .container .row div a.ss {
  padding: 5px 35px 10px 35px;
}

#img-top1 {
  border-radius: 0 0 20px 0;
}

#img-top3 {
  border-radius: 0 0 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<!-- Header -->
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <img id="logo" src="images/logo.png" style="margin-top: 15px;">
      </div>
      <div class="col-sm-12 col-md-6" style="padding: 0;">
        <a href="#" id="img-top1" class="ss btn btn-info float-right" role="button" aria-pressed="true">Primary link1</a>
        <a href="#" id="img-top2" class="ss btn btn-info float-right" role="button" aria-pressed="true">Primary link2</a>
        <a href="#" id="img-top3" class="ss btn btn-info float-right" role="button" aria-pressed="true">Primary link3</a>
        <br style="clear: both;"><br>
        <h4 style="background-color: skyblue; clear: both;">
          <a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-glide-g"></i></a>
          <a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
          <a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
          <a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
          <a class="btn bg-a float-right" href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a>
        </h4>
      </div>
    </div>
  </div>
</header><br>

标识为img-top的按钮无响应,同时具有相同类的图标按钮响应(可能因为体积小)。我怎样才能让它响应? 网络示例:RHT Academy

Picture for more details

0 个答案:

没有答案