Twitter bootstrap 如何在输入组中实现响应行为

我的HTML如下所示：

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="input-group">
            <div class="input-group-btn">
                <button type="button" class="btn btn-default  fa fa-check-square" data-toggle-tooltip="tooltip"
                            title="Toggle All" id="btnItemgridSelectAll" tabindex="5">
                </button>
                <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip"
                            title="Add New Row" tabindex="6">
                </button>
                <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip"
                            title="Delete Selected Row" tabindex="7">
                </button>
            </div>
            <label  class="input-group-addon" >LongText1111111</label>

            <input class="form-control" type="text" />

            <label  class="input-group-addon" >LongText2222222</label>
        </div>
    </div>
</div>

Longtext1111
LongText2222222

以小屏幕分辨率查看布局时，输入组内的控件不会换行

---

请帮帮我。

好吧，这取决于当它很小的时候你想看什么，以及你会添加什么断点来改变它的外观，下面是一个例子。更改css的最佳方法是查看他们的css，然后知道要更改什么。保存一份未缩小的副本，或访问回购协议并在线查看

演示：

CSS

@media (max-width:500px) { 
    .custom-input-group.input-group .input-group-btn {
      width:99%;
      display:block;
      margin-bottom:5px;
    }
    .custom-input-group.input-group .input-group-btn .btn {
        width: 34%;
    }
    .custom-input-group.input-group .input-group-btn .btn:last-child {
        border-radius:0 4px 4px 0
    }
    .custom-input-group {
        display: block
    }
    .custom-input-group.input-group  .input-group-addon {
        clear: both;
        display: block;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .custom-input-group.input-group .input-group-addon + .form-control {
        border-radius: 4px;
        margin-bottom: 5px;
    }
}

HTML

<div class="container">
         <div class="input-group custom-input-group">
            <div class="input-group-btn">
               <button type="button" class="btn btn-default  fa fa-check-square" data-toggle-tooltip="tooltip"
                  title="Toggle All" id="btnItemgridSelectAll" tabindex="5">
               1 </button>
               <button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip"
                  title="Add New Row" tabindex="6">2
               </button>
               <button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip"
                  title="Delete Selected Row" tabindex="7">
               3 </button>
            </div>
            <label  class="input-group-addon" >LongText1111111</label>
            <input class="form-control" type="text" />
            <label  class="input-group-addon" >LongText2222222</label>
         </div>
      </div>

1.
2.
3.
Longtext1111
LongText2222222

col-xs-12 col-sm-12 col-md-12 col-lg-12-溢流。只使用col-xs-12。如果始终为全宽，则可以删除行和列类。至于让它有响应性，制作一个jSbin或Fiddle（或Bootply）。好的，看这个演示，同样它没有包装。他们应该包装什么？你把所有的东西都扔进一个巨大的柱子里。你希望这些控件如何包装。你能提供一个模型吗？谢谢你的回答和演示toooooo:）