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網格系統;按鈕放置

回答

相關問題