Question

我一直这么做几个小时尝试所有的方式，我无法让这些按钮移动。

我不知道如何覆盖CSS来做任何边缘技巧。

我所需要的只是jumbotron，text和button组中的所有内容，才能完美居中。

<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类的内联块。

请参阅示例代码段。

.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>

如何使用twbs在jumbotron中居所有内容：Meteor中的bootstrap

1 个答案: