当我使用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