Twitter Bootstrap 3 pull-right hangs on small windows

Question

In my Twitter Bootstrap 3 project I have an alert div. It has button on left and send button on right. I add pull-right to send button. Everyting works for big screens. Right side button sits well in right.

But In small windows, button hangs in the right side of the alert div, but overflows the div. How can I extend the alert div so the right button will be inside the div ? Or any other solution that suits this condition ?

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

Try this:

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

Answer 2

All you have to do is add class row to the div <div id="ac1" class='row'>.

Here is working example : http://jsfiddle.net/aaVMt/5/

What I did is :

Replaced <div id="ac1"> with <div id="ac1" class='row'>