Question

在我的Twitter Bootstrap 3项目中，我有一个警报div。它左边有按钮，右边有发送按钮。我添加了拉向右发送按钮。每个人都适合大屏幕。右侧按钮位于右侧。 enter image description here

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

enter image description here

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

Answer 2

您所要做的就是将等级row添加到div <div id="ac1" class='row'>。

以下是工作示例：的 http://jsfiddle.net/aaVMt/5/

我做的是：

用<div id="ac1">
替换<div id="ac1" class='row'>

Answer 3

要解决所提出的实际问题（并且不会引起接受答案中所示的副作用），您应该将clearfix类添加到div中。

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

这是一个工作示例： http://jsfiddle.net/aaVMt/22/

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

接受的答案使用row类，clearfix的扩展名以及其他属性（负边距）。如果您打算将其与row类配对以进行布局，则应该只使用col-*。

Twitter Bootstrap 3拉链式挂在小窗户上

3 个答案: