Question

很明显，我在理解bootstrap 4（alpha）处理这些事情的方式时遗漏了一些东西。我已经尝试了各种包装和类修改以及样式添加，但我找不到一种方法来将一堆按钮放在一列中。

.starter-template {}
/* Buttons */
.btn.center {display: block; margin: 1rem auto;} 


/* Center Button Group Vertical */
.btn-group-vertical.center {text-align: center;}

<link href="http://www.australian-art-gallery.com/g/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid"><div class="starter-template">

<div class="row">

<div class="col-sm-4" style="background-color: yellow;">
<div class="block-center text-center" style="margin: auto;">
<div class="btn-group-vertical center" style="margin: auto;">
<a class="btn btn-outline-primary mx-auto"  href="find_artist.htm" title="Australian Artists"  target="_self" >Find an Artist</a>
<a class="btn btn-outline-primary " href="find_gallery.htm" title="Australian Galleries"  target="_self" >Find a Gallery</a>
<a class="btn btn-outline-primary " href="find_event.htm" title="Australian Exhibitions"  target="_self" >Find an Exhibition</a>
<a class="btn btn-outline-primary " href="cgi-bin/v_prizes.pl"  title="Australian Art Prizes"  target="_self" >Find an Art Prize</a>
</div></div>
</div>

  <div class="col-sm-4"  style="background-color: lime;">Other Stuff
    </div>
    <div class="col-sm-4"  style="background-color: pink;">More other stuff
    </div>
  </div>
  </div>  </div>

显然，这里捆绑的所有尝试都是混乱的。试着展示我尝试过的所有东西！

Answer 1

远离内联样式<div style="...">。添加显示：块;以下内容应该为您解决问题。

.btn-group-vertical.center {
  display: block;
  margin: 0 auto;
  text-align: center;
}

查看我的codepen示例http://codepen.io/yongchuc/pen/mrNVPG

如何使用引导程序4

1 个答案: