Twitter Bootstrap 3右拉掛在小窗口

在我的Twitter Bootstrap 3項目中，我有一個提醒div。它有左邊的按鈕和右邊的發送按鈕。我添加右鍵發送按鈕。適用於大屏幕的各種作品。右側按鈕位於右側。 enter image description here Twitter Bootstrap 3右拉掛在小窗口

但在小窗口中，按鈕會掛在警告div的右側，但會溢出div。我怎樣才能擴展提醒div，讓右邊的按鈕將在div內？還是適合這種情況的其他解決方案？

enter image description here

http://jsfiddle.net/mavent/aaVMt/4/

<div class="alert alert-success" id="ab1"> 
     <div id="ac1"> 
      <div class="btn-group"> 
       <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 
        Text <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#" onclick="">Text 1</a></li> 
        <li><a href="#" onclick="">Text 2</a></li> 
       </ul> 
      </div> 

      <div style="display:inline-block;"> 
       <div id="a1"> 
        <p>Some text some text this is my elegant text hello world this text is cool 1</p> 
       </div> 
      </div> 

      <button class="btn btn-primary pull-right" id="aaa"> 
       Send 
      </button> 
     </div> 
    </div>

來源

2013-12-22 trante

所有您需要做的就是添加row類到div <div id="ac1" class='row'>。

這裏是工作示例： http://jsfiddle.net/aaVMt/5/

我所做的是：

替換<div id="ac1">與<div id="ac1" class='row'>

來源

2013-12-22 12:12:32

謝謝。但是該解決方案修復了無左右兩側的左右按鈕。右鍵粘到右側。 – trante

當然，爲每個按鈕添加邊距 - 右邊：10px和邊距 - 左邊：10px是一種附加解決方案。 – trante

您正在編寫.. .row具有負邊距。我不明白爲什麼......另一種解決方案是取消邊距或執行此操作：http://jsfiddle.net/aaVMt/6/ –

試試這個：

<div class="alert alert-success" id="ab1"> 
    <div class="row"> 
     <div class="pull-left col-xs-6 col-sm-9 col-md-9"> 
      <div id="ac1"> 
       <div class="btn-group"> 
        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 
       Text <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#" onclick="">Text 1</a></li> 
         <li><a href="#" onclick="">Text 2</a></li> 
        </ul> 
       </div> 

       <div style="display:inline-block;"> 
        <div id="a1"> 
         <p>Some text some text this is my elegant text hello world this text is cool 1</p> 
       </div> 
     </div>    
     </div> 
<div class="col-xs-6 col-sm-3 col-md-3 pull-right"> 
     <button class="btn btn-primary" id="aaa"> 
      Send 
     </button> 
     </div> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/mavent/aaVMt/4/

來源

2013-12-22 12:07:21 arturataide

爲了解決這一被要求（並不會導致副作用的實際問題在接受的答案中展示），您應該將clearfix類添加到div。

<div id="ac1" class="clearfix"> 
    ... 
</div>

這裏是一個工作示例： http://jsfiddle.net/aaVMt/22/

與clearfix類將清除其年底前所有浮動內容的元素，以確保裏面的元素都正確地遏制。您可以在CSS-Tricks文章All About Floats中找到有關浮動和清除的更多信息。

接受的答案使用row類，clearfix的擴展與附加屬性（負邊距）。如果您打算將其與col-*類配對使用，則只應使用row。

來源

2015-10-23 09:31:23

Twitter Bootstrap 3右拉掛在小窗口

回答

相關問題