引导输入组答案

【问题标题】：Bootstrap input Group引导输入组
【发布时间】：2016-11-25 22:10:51
【问题描述】：

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

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

这是我的代码：

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

感谢您的帮助...

【问题讨论】：

粘贴样式，否则无法真正解决您的问题。
你最好在问题所在的地方提供我们的实时链接
使用textarea 代替标签。

标签： css html twitter-bootstrap twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

你可以这样做：

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

关闭“行”div

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

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

【讨论】：

【解决方案2】：

您可以删除 .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%;
}

【讨论】：

这也有效，但我必须将此类添加到标签中。我还必须将它放在来自输入组和跨度的 de div 中。然后它起作用了......

【解决方案3】：

您忘记关闭 row 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/

【讨论】：

即使我不关闭 div 我仍然得到正确的结果
没错，但是当我关闭行 div 时，它仍然无法正常工作！？！
也许你的 html 的其余部分有问题，你能发布完整的代码吗？
不。我猜它不会工作，给工作的sn-p
在我的回复中添加了 JSFiddle，@user1861065

【解决方案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>

【讨论】：