6

我目前正在使用最新版本的 bootstrap 3.0.0

问题很简单。在 jumbotron 容器中，我使用如何将文本与徽标居中对齐

我已经玩了几个小时，使用 col-md-* 并且运气不佳。

在引导程序 2.3.2 中，我通过使用.text-center和.pagination center（对于图像？？ - 它有效）实现了将所有内容置于 hero 中心的效果

http://jsfiddle.net/zMSua/

这个小提琴显示了我试图以 bootstrap 3.0.0 为中心的文本和图像

4

3 回答 3

8

为什么不偏移网格？

像这样：

<div class="jumbotron">
      <div class="container">
        <div class="row well well-lg">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="">Home of the</h1>
                <div class="">
                    <img src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" />
                </div>
                <h2 class="">"All In", Fun!</h2>
            </div>
        </div>
      </div>

如果您的主列有 6 个，则引导程序有一个 12 列网格，您可以将其偏移 3 并留下：

3列6（主容器）和3列

于 2013-09-09T22:40:33.913 回答
5

这是另一个答案，它可以将一些内容集中在实际的 div 中：

  <head>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

        <style>
            .centerfy img{
                margin: 0 auto;
            }
            .centerfy{
                text-align: center;
            }

        </style>
    </head>
    <body style=" padding: 10px;">
    <div class="jumbotron">
      <div class="container">
        <div class="row well well-lg">
            <div class="col-md-6 col-md-offset-3 centerfy">

                <h1 class="">Home of the</h1>
                <div class="">
                    <img  src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" />
                </div>
                <h2 class="">"All In", Fun!</h2>
            </div>
        </div>
      </div>
    </body>

检查我添加的类。

于 2013-09-09T23:03:58.827 回答
2

从 Bootstrap 3.3.6 开始，我在 Jumbotron 中居中文本和徽标的经验只是通过将 .text-center 添加到您的 .container 类元素，以及 .img-responsive 和 .center-block 到您的图像元素。我发现不需要修改 CSS 类或偏移引导区域。

看看我的演示。

  <div class="jumbotron">
            <div class="container text-center"> 
            <h1>Hello World</h1>
            <img src="http://klpgo.com/klpfiles/images/klpgov3.png" alt="img" class="img-responsive center-block">
            <p>custom text within my jumbotron</p>
            <a class="btn btn-default">first button</a>
            <a class="btn btn-info">second button</a>
            </div>
        </div>
于 2016-03-04T22:52:21.053 回答