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

您忘记关闭行 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 2

您可以删除 bootstrap.css 中的行 class .form-control

.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;
}

或...向此标签添加 class：

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

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

Answer 3

你可以这样做：

.noFloat {
  float: none !important;
}

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

关闭 "row" div

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

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

Answer 4

您唯一需要做的就是将 form-control 更改为 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>

Bootstrap 输入组

Bootstrap input Group

html

css

twitter-bootstrap

angular-ui-bootstrap

twitter-bootstrap-3