Question

我已经使用Bootstrap构建了这个按钮，但它们并不是居中的。我会附上一张有问题的照片。我是bootstrap的新手，因为我自己写的是css。 buttons 代码：

HTML / CSS

＆＃13;

Error in cor[new_table$num_flights, new_table$max_mean_delay] : 
  object of type 'closure' is not subsettable

＆＃13;

  .social {
  bottom: 0;
  left: 0;
  margin: 10px;
  position: absolute;
}

.fa-social {
  background: #2098f5;
  border: 0px solid #2098f5;
  color: rgb(255, 255, 255);
  height: 42px;
  line-height: 45px;
  text-align: center;
  width: 42px;
}

.fa-social:hover {
  color: #2098f5;

＆＃13;

Answer 1

简单地将类btn添加到您的锚点（a）标签，如下所示

        <div class="social">
            <a href="https://www.facebook.com" class="btn btn-primary"><i class="icon-facebook fa-2x fa-social"></i></a>
            <a href="https://www.twitter.com" class="btn btn-primary"><i class="icon-twitter fa-2x fa-social"></i></a>
            <a href="https://www.linkedin.com" class="btn btn-primary"><i class="icon-linkedin fa-2x fa-social"></i></a>
            <a href="https://www.plus.google.com" class="btn btn-primary"><i class="icon-google-plus fa-2x fa-social"></i></a>
        </div>

注意：此处我还使用了btn-primary只能跳过或设置默认颜色。

Answer 2

Changed your CSS a little. Run the snippet below.

.social {
    text-align: center;
   margin: 0 auto;
}

.fa-social {
    background: #2098f5;
    border: 0px solid #2098f5;
    color: rgb(255, 255, 255);
    height: 42px;
    line-height: 45px;
    text-align: center;
    width: 42px;
}

.fa-social:hover {
      color: #2098f5;
      }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="social">
            <a href="https://www.facebook.com"><i class="fa fa-facebook fa-2x fa-social"></i></a>
            <a href="https://www.twitter.com"><i class="fa fa-twitter fa-2x fa-social"></i></a>
            <a href="https://www.linkedin.com"><i class="fa fa-linkedin fa-2x fa-social"></i></a>
            <a href="https://www.plus.google.com"><i class="fa fa-google-plus fa-2x fa-social"></i></a>
        </div>

Answer 3

尝试使用以下内容替换您的.social CSS元素：

.social {
   text-align: center;
   margin: 0 auto;   
}

Bootstrap按钮不会居中

HTML / CSS

3 个答案: