我正在使用bootstrap 4网格系统来显示一些按钮。 我想水平居中的按钮在一个列-这里的列与绿色边框。 到目前为止，对justify-content-center的所有尝试都失败了。
<div class="row">
<div class="col-2">
<span>some text</span>
</div>
<div class="col-8" style="border:1px solid green;">
<button mat-raised-button>I am a button</button>
<button mat-raised-button>I am a button</button>
</div>
</div>
这个例子给出了结果
我想要的结果是
请注意--为了使生活更加复杂，没有一个设定的按钮居中--它可以是一个，它可以是五个，也可以是介于两者之间的东西。 因此解决方案需要使用任意数量的按钮。
Stackblitz上的相同示例:https://stackblitz.com/edit/github-t6uyxp-1awssd？file=src%2fapp%2fapp.component.html
Bootstrap有一个类text-center，它将满足您的需要。
null
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<span>some text</span>
</div>
<div class="col-8 text-center" style="border:1px solid green;">
<button mat-raised-button>I am a button</button>
<button mat-raised-button>I am a button</button>
<button mat-raised-button>I am a button</button>
</div>
</div>
有很多不同的方式。 一种方法是使用flexbox Utils.。。
<div class="row">
<div class="col-2">
<span>some text</span>
</div>
<div class="col-8 d-flex justify-content-center" style="border:1px solid green;">
<button mat-raised-button>I am a button</button>
<button mat-raised-button>I am a button</button>
</div>
</div>
