Question

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

以下是我目前的情况：

current

我希望按钮在页面的最右边 ，在与标题相同的高度。我怎么能这样做？

我的代码如下：

<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

小提琴并没有把它们放在一条线上，因为你已经把它们搞定了。因为屏幕宽度较小。尝试col-xs ..

试试这个：

<div class='container'>
<div class='row marketing'>
    <div class='col-lg-15'>
        <div class='page-header'>

            <div class='row'>
                <div class='col-xs-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 class='col-xs-2'>
                    <button class='btn pull-right'>Button</button>
                </div>
            </div>
        </div>
        <h3>Page Content:</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Answer 2

你刚搞砸了你的行和列。如果你想要一行中的所有内容，你只需要为你的按钮创建另一行（这将把它放在你的第一行下面）。把它想象成一张桌子。另一件事是，如果你使用一些h标签，它们有一些间距，所以如果你仍然把所有东西放在一行中它几乎可以工作，但正如你在评论中提到的，你的按钮将符合＆＃34;附加文字＆＃34 ;.因此，您必须将按钮放在h1标签上方，给它上课＆＃34;右拉＆＃34;并使用按钮删除div上的类行。以下是适合我的小提琴：

<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文件。

Answer 3

在按钮中添加右拉类：

<div class='container'>
<div class='row marketing'>
    <div class='col-xs-12'>
        <div class='page-header'>
            <div class='row'>
                <div class='col-xs-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 class="col-xs-2">
                    <button class='btn pull-right'>Button</button>                        
                </div>
            </div>
        </div>
        <h3>Page Content:</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Answer 4

实际上，你没有在Bootstrap网格中定义你的列，

默认情况下，浏览器的UserAgent使用display:block定义div，因此它会自动清除浮点数;

试试我在display:inline-block和the result改变你的div：

BTW你需要看看为什么没有定义你的col，你不能用它作为修复，它只是为了显示问题。

Bootstrap网格系统;按钮位置

4 个答案: