Html 推特引导3向右拉挂在小窗口上

在我的TwitterBootstrap3项目中，我有一个alert div。它在左边有按钮，在右边有send按钮。我添加了向右拉发送按钮。在大屏幕上，一切都是有效的。右边的按钮正好在右边。

但在小窗口中，按钮挂在alert div的右侧，但溢出了div。如何扩展alert div，使右侧按钮位于div内？或者其他适合这种情况的解决方案

正文




一些文字一些文字这是我优雅的文字你好世界这文字很酷1

发送

试试这个：

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

正文




一些文字一些文字这是我优雅的文字你好世界这文字很酷1

发送

---

您所要做的就是将class

行

添加到div

下面是一个工作示例：

我所做的是：

---

将

替换为

，以解决所问的实际问题（并且不产生可接受答案中演示的副作用），您应该将
clearfix
类添加到div中

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


...

以下是一个工作示例：

具有clearfix类的元素将在其结束之前清除所有浮动内容，以确保其中的元素被正确包含。您可以在CSS技巧文章中找到有关浮动和清除的更多信息

接受的答案使用
行
类，这是
clearfix
的扩展，带有附加属性（负边距）。如果要将其与
col-*
类配对以进行布局，则只能使用
row
。
谢谢。但该解决方案将左右按钮固定在左右两侧，没有边距。右边的按钮粘在右边。当然，在每个按钮上添加右边距：10px和左边距：10px是一个额外的解决方案。您正在写。行具有负边距。我不明白为什么。。另一种解决方案是取消保证金，或者这样做：
<div id="ac1" class="clearfix">
  ...
</div>