Question

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

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

请帮帮我。

Answer 1

嗯，根据你想看的时候它看起来很小以及断点是什么，你可以添加css来改变它的外观，这是一个例子。更改css的最佳方法是查看他们的CSS然后知道要改变什么。保持一份未经缩小的副本或访问回购并在线查看。

演示：http://jsbin.com/piyado/1/

enter image description here

<强> 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 个答案: