html - 如何使用 twbs :bootstrap in Meteor 将超大屏幕中的所有内容居中

Question

我已经做了好几个小时，尝试了所有方法，但我无法让这些按钮移动。

我不确定如何覆盖 CSS 来执行任何边距技巧。

我所需要的只是让超大屏幕、文本和按钮组中的所有内容都完美居中。

<template name="Jumbotron">
<div class="jumbotron center">
    <h1>Hello, world!</h1>
    <p>Get Started Now</p>
        <div class="btn-toolbar">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
        </div>
</div>
</template>

Answer 1

将 btn-toolbar 类的显示属性更改为 inline-block。

参见示例片段。

.btn-toolbar.meteor-btn-toolbar,
.btn-toolbar.meteor-btn-toolbar2 {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
  <h1>Hello, world!</h1>

  <p>Get Started Now</p>
  <div class="btn-toolbar meteor-btn-toolbar" role="toolbar" aria-label="...">
    <div class="btn-group" role="group" aria-label="..."> <a role="button" class="btn btn-primary btn-lg">Learn More</a>
      <a role="button" class="btn btn-primary btn-lg">Learn More</a>

    </div>
  </div>
</div>
<hr>
<div class="jumbotron text-center">
  <h1>Hello, world!</h1>

  <p>Get Started Now</p>
  <div class="btn-toolbar meteor-btn-toolbar2"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

  </div>
</div>