html - Twitter Bootstrap 3 pull-right 卡在小窗口上

Question

在我的 Twitter Bootstrap 3 元素中，我有一个警报 div。它的左边有按钮，右边有发送按钮。我添加右拉发送按钮。一切都适用于大屏幕。右侧按钮位于右侧。

但是在小窗口中，button卡在了alert div的右边，反而溢出了div。如何扩展 alert div 以便正确的按钮位于 div 内？或者任何其他适合这种情况的解决方案？

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>

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

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