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

发布时间:2020-08-29 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了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>

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

请帮我.

解决方法

好吧,根据你想看的时候它看起来很小,断点是什么,你可以添加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" >LongText1111111</label>
            <input class="form-control" type="text" />
            <label  class="input-group-addon" >LongText2222222</label>
         </div>
      </div>

总结

以上是编程之家为你收集整理的twitter-bootstrap – 如何在输入组中实现响应行为全部内容,希望文章能够帮你解决twitter-bootstrap – 如何在输入组中实现响应行为所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478