twitter-bootstrap – 在Twitter Bootstrap 2.3.2中使用input-bl

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

导读：我想知道如何使用twitter bootstrap 2.3.2中的输入前置图标和响应式布局来使输入字段填充可用宽度？在bootstrap中有一个css样式输入块级别的巫婆工作正常,直到你用一个图标添加你的输入…如何获得与prependet输入相同的功能？ div class="control-group" la

我想知道如何使用twitter bootstrap 2.3.2中的输入前置图标和响应式布局来使输入字段填充可用宽度？

在bootstrap中有一个css样式输入块级别的巫婆工作正常,直到你用一个图标添加你的输入…如何获得与prependet输入相同的功能？

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend ">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text" class="input-block-level">
    </div>
  </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password" class="input-block-level">
    </div>
</div>

这里是说明此问题的代码示例：http://jsfiddle.net/r3CyL/

解决方法

你需要添加一些额外的CSS

DEMO jsFiddle

.input-prepend.input-block-level {
  display: table; 
}
.input-prepend.input-block-level .add-on {
  display: table-cell;
}
.input-prepend.input-block-level > input {
  width: 100%;
}

您可以将边框颜色添加到input-prepend.input-block-level .add-on {以改善它的外观.

input-prepend.input-block-level .add-on {
    display: table-cell;
    border-right: #fff;
}

EDITED

另一种更为参与的方式.这也是Bootstrap的批准.

DEMO jsFiddle

.input-append.input-block-level,.input-prepend.input-block-level {
  display: table;
}

.input-append.input-block-level .add-on,.input-prepend.input-block-level .add-on {
  display: table-cell;
  width: 1%; /* remove this if you want default bootstrap button width */
}

.input-append.input-block-level > input,.input-prepend.input-block-level > input {
  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
  display: table; /* table-cell is not working well in Chrome for small widths */
  min-height: inherit;
  width: 100%;
}

.input-append.input-block-level > input {
  border-right: 0;
}

.input-prepend.input-block-level > input {
  border-left: 0;
}

（编辑：李大同）

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