我有一些引导代码可以生成上面的图像：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row top-buffer-sma">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button onclick="location.href = 'http://steamcommunity.com/groups/BTBGUK';" type="button" class="btn">
<img src="img/steam.png" class="img-responsive" alt="Steam">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://www.facebook.com/BackToBasicsGaming?ref=hl';" type="button" class="btn">
<img src="img/facebook.png" class="img-responsive" alt="Facebook">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://twitter.com/DanPlanetTerra';" type="button" class="btn">
<img src="img/twitter.png" class="img-responsive" alt="Twitter">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://www.youtube.com/channel/UCwNckSSF-y5SAOtLPU6Qfrg?view_as=public';" type="button" class="btn">
<img src="img/youtube.png" class="img-responsive" alt="YouTube">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://plus.google.com/u/0/103627402461915246566/posts/p/pub';" type="button" class="btn">
<img src="img/googleplus.png" class="img-responsive" alt="Google+">
</button>
</div>
</div>
</div>img
如何使包含img-responsive类img的按钮完全包装其内容（{{1}}），同时减少它们之间的间距？
我希望它更像是：
答案 0 :(得分：0)
主要问题是您在html中使用了太多btn-group，请参阅此更新的代码段：
.top-buffer-sma {
margin-top: 22px;
text-align: center;
}
.top-buffer-med {
margin-top: 33px;
}
.top-buffer-big {
margin-top: 50px;
}
.img-responsive {
margin: 0 auto;
}
.btn {
height: auto;
width: auto;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
background-image: none;
border: 0 none;
padding: 1px !important;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
border: 0 none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="top-buffer-sma">
<div class="btn-group" role="group">
<button onclick="location.href = 'http://steamcommunity.com/groups/BTBGUK';" type="button" class="btn">
<img src="http://downloadicons.net/sites/default/files/steam-icon-4332.png" class="img-responsive" alt="Steam">
</button>
<button onclick="location.href = 'https://www.facebook.com/BackToBasicsGaming?ref=hl';" type="button" class="btn">
<img src="https://www.geeksaresexy.net/wp-content/themes/geeksaresexy/images/socialmedia/facebook.png" class="img-responsive" alt="Facebook">
</button>
<button onclick="location.href = 'https://twitter.com/DanPlanetTerra';" type="button" class="btn">
<img src="https://www.theautismdad.com/wp-content/plugins/wordpress-social-login/assets/img/32x32/wpzoom//twitter.png" class="img-responsive" alt="Twitter">
</button>
<button onclick="location.href = 'https://www.youtube.com/channel/UCwNckSSF-y5SAOtLPU6Qfrg?view_as=public';" type="button" class="btn">
<img src="http://foxsyracuse.com/images/yticon.png" class="img-responsive" alt="YouTube">
</button>
<button onclick="location.href = 'https://plus.google.com/u/0/103627402461915246566/posts/p/pub';" type="button" class="btn">
<img src="http://onlinepbe.com/images/google.png" class="img-responsive" alt="Google+">
</button>
</div>
</div>
答案 1 :(得分：0)
将button包裹在Flex容器中，并提供.btn类margin:2px（2px为例）＆amp; padding:0;（然后根据需要调整button.btn margin之间的空间）
/* added flex container */
.container {
border: 1px solid lightgray;
display: flex;
flex-flow: row wrap;
justify-content: center;
/* comment fixed width if you want full row width */
width: 320px;
}
button.btn {
height: auto;
width: auto;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
background-image: none;
border: 0 none;
/* added these */
margin: 2px;
padding: 0;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
border: 0 none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="btn-group" role="group">
<button onclick="location.href = 'http://steamcommunity.com/groups/BTBGUK';" type="button" class="btn">
<img src="img/steam.png" class="img-responsive" alt="Steam">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://www.facebook.com/BackToBasicsGaming?ref=hl';" type="button" class="btn">
<img src="img/facebook.png" class="img-responsive" alt="Facebook">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://twitter.com/DanPlanetTerra';" type="button" class="btn">
<img src="img/twitter.png" class="img-responsive" alt="Twitter">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://www.youtube.com/channel/UCwNckSSF-y5SAOtLPU6Qfrg?view_as=public';" type="button" class="btn">
<img src="img/youtube.png" class="img-responsive" alt="YouTube">
</button>
</div>
<div class="btn-group" role="group">
<button onclick="location.href = 'https://plus.google.com/u/0/103627402461915246566/posts/p/pub';" type="button" class="btn">
<img src="img/googleplus.png" class="img-responsive" alt="Google+">
</button>
</div>
</div>