Question

我试图将一排引导自定义按钮居中。它不起作用，仍然在页面的左侧，无论我尝试什么。我需要一些帮助。该页面将所有引导程序添加到代码中，就像它应该的那样，但我不能将这些按钮置于中心位置。谢谢。这是我的CSS和HTML代码

<style type="text/css">
 .btn-circle {

      width: 130px;
      height: 130px;
      padding: 10px 0;
      font-size: 12px;
      border:7px solid #cfd8dc;
      line-height: 1.428571429;
      border-radius: 130px;
    }


    .btn-circle.btn-lg {
      width: 130px;
      height: 130px;
      padding: 10px 16px;
      font-size: 18px;
      line-height: 1.33;
      border-radius: 130px;
      border:7px solid #cfd8dc;
    }
    .btn-circle.btn-xl {
      width: 130px;
      height: 130px;
      padding: 10px 16px;
      font-size: 24px;
      line-height: 1.33;
      border-radius: 130px;
     border:7px solid #cfd8dc;
    }

</style>

    <div class="row" style="margin:auto;text-align:center;">

    <div class="col-lg-2"><button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
  <div class="col-lg-2"><button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
   <div class="col-lg-2">   <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
   <div class="col-lg-2">  <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
</div>

Answer 1

取出每个按钮周围不必要的div换行，然后text-align正常工作。检查小提琴：https://jsfiddle.net/bL8vr504/1/

<div class="row" style="margin:auto;text-align:center; width: 100%;">

    <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
    <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
    <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
    <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>

</div>

最后的注释，在其中一个按钮类上应用任何所需的边距。

Answer 2

修正了您的代码。 -

＆＃13;

 .btn-circle {

      width: 130px;
      height: 130px;
      padding: 10px 0;
      font-size: 12px;
      border:7px solid #cfd8dc;
      line-height: 1.428571429;
      border-radius: 130px;
    }


    .btn-circle.btn-lg {
      width: 130px;
      height: 130px;
      padding: 10px 16px;
      font-size: 18px;
      line-height: 1.33;
      border-radius: 130px;
      border:7px solid #cfd8dc;
      display:inline-block;
    }
    .btn-circle.btn-xl {
      width: 130px;
      height: 130px;
      padding: 10px 16px;
      font-size: 24px;
      line-height: 1.33;
      border-radius: 130px;
     border:7px solid #cfd8dc;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="row" style="margin:auto;text-align:center;">

    <div class="col-lg-2 col-lg-offset-2"><button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
  <div class="col-lg-2"><button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
   <div class="col-lg-2">   <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
   <div class="col-lg-2">  <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
</div>

＆＃13;

解决重叠问题。 -

＆＃13;

.btn-circle {

      width: 130px;
      height: 130px;
      padding: 10px 0;
      font-size: 12px;
      border:7px solid #cfd8dc;
      line-height: 1.428571429;
      border-radius: 130px;
    }


    .btn-circle.btn-lg {
      width: 130px;
      height: 130px;
      padding: 10px 16px;
      font-size: 18px;
      line-height: 1.33;
      border-radius: 130px;
      border:7px solid #cfd8dc;
      display:inline-block;
    }
    .btn-circle.btn-xl {
      width: 130px;
      height: 130px;
      padding: 10px 16px;
      font-size: 24px;
      line-height: 1.33;
      border-radius: 130px;
     border:7px solid #cfd8dc;
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="row">

    <div class="col-xs-12"  style="text-align:center;">
      <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
      <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
      <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
      <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button>
    </div>
</div>

＆＃13;

Answer 3

您只需将 col-lg-offset-2 添加到第一列

您不需要style="margin:auto;text-align:center;"

或者您也可以这样做：

<div class="col-lg-2"></div>
<div class="col-lg-2"><button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
  <div class="col-lg-2"><button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
   <div class="col-lg-2">   <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
   <div class="col-lg-2">  <button type="button" class="btn btn-default btn-circle btn-lg"><span>-</span></button></div>
<div class="col-lg-2"></div>

Answer 4

将所有<div class="col-lg-2">替换为<div class="col-lg-2 text-center">

通常它起作用问候
纳比尔

Bootstrap对中按钮不起作用

4 个答案: