Bootstrap：连续的按钮，没有间隙

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

兄弟请为每个id和类提供CSS，以便我们可以了解。

或者您可以将所有按钮放在单个col-md-12中，如

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

Answer 2

显示差距是因为您将每个按钮放在每个col-xs-2内。引导程序中的col具有自己的宽度。要解决您的问题，请尝试只创建一列并将其命名为col-xs-12并将所有按钮放在那里。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;