ブートストラップ：隙間のない行のボタン

Question

これは初めてのことです。 Bootstrapのボタンに行間を入れないようにしようとしていますが、マージンとパディングの設定を調整しようとしても違いはありません。

<div class="row text-center"> 
    <div class="col-xs-2"> 
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button> 
    </div> 
    <div class="col-xs-2"> 
    <button class="btn"><a href="y"><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i></a></button> 
    </div> 
    <div class="col-xs-2"> 
    <button class="btn"><a href="z"><i class="fa fa-stack-exchange fa-2x" aria-hidden="true"></i></a></button> 
    </div> 
    <div class="col-xs-2"> 
    <button class="btn"><a href="x"><i class="fa fa-quora fa-2x" aria-hidden="true"></i></a></button> 
    </div> 
    <div class="col-xs-2"> 
    <button class="btn"><a href="y"><i class="fa fa-reddit-alien fa-2x" aria-hidden="true"></i></a></button> 
    </div> 
    <div class="col-xs-2"> 
    <button class="btn"><a href="z"><i class="fa fa-free-code-camp fa-2x" aria-hidden="true"></i></a></button> 
    </div> 
</div> 

私が間違ってやっている誰もが知っていますか？

Answer 1

ギャップが示されているように、単一のCOL-MD-12であなたのすべてのボタンを置くことができます。ブートストラップのcolには独自の幅があります。問題を解決するには、1列だけを作成してcol-xs-12と呼んで、すべてのボタンをそこに配置してみてください。もちろん

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row text-center"> 
 
    <div class="col-xs-12"> 
 
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button> 
 
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button> 
 
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button> 
 
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button> 
 
    <button class="btn"><a href="x"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Bro私たちがアイデアを得るために、IDとクラスごとにCSSを提供してください。

それとも、あなたは、各col-xs-2内の各ボタンを配置しているため

<div class="row"> 
<div class="col-md-12"> 
Add buttons 
</div> 
</div>