Bootstrap输入组

Question

我有一个带有输入组标签的复选框。当我在标签上有一个长文本时，它看起来像

我能做什么，输入组会调整大小，文本是否适合它？

这是我的代码：

<div class="row">
<div class="col-xs-6">
    <div class="input-group">
        <span class="input-group-addon">
            <input type="checkbox">
        </span>
        <label type="text" class="form-control">asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf </label>
    </div>
</div>

感谢您的帮助...

Answer 1

你可以这样做：

＆＃13;

＆＃13;

.noFloat {
  float: none !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
    <div class="col-xs-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox">
            </span>
            <label type="text" class="form-control noFloat">asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf </label>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

关闭＆＃34;行＆＃34;格

从标签中删除 float 属性，添加 noFloat 类

这不是最佳解决方案，但可能符合您的需要。

Answer 2

您忘了关闭行 div：

<div class="row"> <div class="col-xs-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <label type="text" class="form-control">asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf </label> </div> </div> </div>

你会得到这样的东西：

添加了JSFiddle：https://jsfiddle.net/DTcHh/27368/

Answer 3

您可以删除类.form-control

中bootstrap.css中的行

.form-control {
  display: block;
  width: 100%;
  height: 34px;  <-- THIS ONE
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

或...为此标签添加一个类：

asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf

.no-height-default {
 height: 100%;
}

Answer 4

您唯一需要做的就是将表单控件更改为form-control-static。像这样

<div class="row">
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon ">
                        <input type="checkbox">
                    </span>
                    <label class="form-control-static">asdf asd fas df sadf asdfsadfsdf sDASDF ASDFASDF ASDFasd asdfsadf asdf asdf asdf </label>
                </div>
            </div>
        </div>