twitter-bootstrap – 如何在输入组中实现响应行为

发布时间：2020-12-17 20:38:06 所属栏目：安全来源：网络整理

导读：我的 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" t

我的 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" >LongText2222211</label>

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

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

在小屏幕分辨率下查看布局时,输入组内的控件不会换行.

请帮我.

解决方法

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

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

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" >LongText2222211</label>
            <input class="form-control" type="text" />
            <label  class="input-group-addon" >LongText2222222</label>
         </div>
      </div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!