html - Bootstrap 网格系统；按钮放置

Question

我正在尝试使用 Bootstrap 网格系统在我想要的位置放置一个按钮，但我无法让它工作。

这是我目前拥有的:

我希望按钮位于页面的最右侧并且与标题处于同一高度。我该怎么做？

我的代码如下:

<div class='container'>
<div class='row marketing'>
    <div class='col-lg-15'>
        <div class='page-header'>
            <div class='row'>
                <div class='col-md-10'>
                    <div class='media'>
                        <div class='media-body'>
                             <h1 class='media-heading'>
                             Title
                                 <small>Subtitle</small>
                             </h1>
                             <h5>Additional text</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row'>
                <div class='col-md-2'>
                    <button class='btn'>Button</button>
                </div>
            </div>
        </div>
        <h3>Page Content:</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

这是一个工作示例:http://jsfiddle.net/urzyLo6r/1/

Answer 1

您刚刚弄乱了您的行和列。如果您想要一行中的所有内容，您只需不要为您的按钮创建另一行(这会将其放在您的第一行下方)。把它想象成一张 table 。另一件事是，如果你使用一些 h 标签，它们会有一些间距，所以如果你仍然将所有内容放在一行中，它几乎可以工作，但正如你在评论中提到的那样，你的按钮将与“附加文本”一致。所以你必须把按钮放在你的 h1 标签上面，给它类“pull-right”并用按钮删除 div 上的类行。这是对我有用的 fiddle :

<div class='container'>
<div class='row marketing'>
    <div class='col-lg-12'>
        <div class='page-header'>
            <div class='row'>
                <div class='col-md-2 pull-right'>
                    <button class='btn'>Button</button>
                </div>
                <div class='col-md-10 pull-left'>
                    <div class='media'>
                        <div class='media-body'>
                             <h1 class='media-heading'>
                            Title
                            <small>Subtitle</small>
                        </h1>

                             <h5>Additional text</h5>

                        </div>
                    </div>
                </div>
            </div>



        </div>
        <h3>Page Content:</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

为了将来，bootstrap 使用了 12 列网格，所以没有理由使用 col-lg-15。好吧，至少如果您不自己编辑 Bootstrap 文件的话。