Bootstrap网格系统;按钮放置

我想放置一个按钮，我想要它，使用Bootstrap网格系统，但我无法让它工作。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/

来源

2015-02-24 JNevens

您可以删除第二行并将它们放在同一行中。并向该按钮的div添加右键。 – wrick17 2015-02-24 09:47:02

您错过了您的网格线风格.. – maioman 2015-02-24 09:47:02

@ wrick17将它们放在同一行为我工作！ – JNevens 2015-02-24 09:52:38

你刚刚搞砸了你的行和列。如果你想把所有东西都放在一行中，你不需要为你的按钮创建另一行（这会把它放在你的第一行之下）。把它像一张桌子一样形象。另一件事是，如果你使用一些h标签，它们有一定的间距，所以如果你仍然把所有东西放在一行中，它几乎可以工作，但正如你在评论中提到的那样，你的按钮将符合“附加文本”。所以你必须把按钮放在你的h1标签上面，给它上课“pull-right”并用按钮删除div上的class row。下面是我在摆弄什么作品：

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

和公正的未来，引导使用12列格，所以没有理由使用COL-LG-15。那么，至少如果你没有编辑引导文件本身。

来源

2015-02-24 10:04:27 p0da

我只是意识到我忘记了一些东西。我的答案没有响应bootstrap应该是，但真正简单的解决方案。只需将col-md-10的左上角类添加到div，那么标题就不会隐藏在小屏幕上的按钮后面。我编辑了我的答案，所以你可以看到它。 – p0da 2015-02-24 10:18:53

添加右拉式类的按钮：

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

来源

2015-02-24 09:31:59 Abdooapps

这使它在最右边，但不是在标题相同的高度。 – JNevens 2015-02-24 09:33:05

现在试试这个例子，我已经更新了Html。 – Abdooapps 2015-02-24 09:55:33

小提琴没有把他们放在一条线上，因为你有共同点。因为屏幕宽度较小。尝试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>

来源

2015-02-24 09:44:48 wrick17

其实你没有在引导网格定义你的列，

，并且默认浏览器的用户代理定义的div与display:block所以它会自动清除浮游物;

只是尝试我改变了你的div在display:inline-block和这里的the result：

顺便说一句，你需要知道为什么你的山坳没有定义，你不能用这个作为一个解决方法，它只是显示问题。

来源

2015-02-24 09:56:30 maioman

Bootstrap网格系统;按钮放置

回答

相关问题