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右拉挂在小窗口

回答

相关问题