引导 前置和附加输入 如何最大输入字段宽度?

我正在使用Bootstrap从twitter。我想要的是制作一个前置文本,输入字段和一个按钮,但是我希望我的输入字段具有最大可用宽度,以便提交按钮的右边缘靠近该对象的右边缘。从引导文档中可以看出.input-block-level类允许任何或元素的行为类似于块级元素,但是将其应用到输入中会给出中心输入的大小。 http://jsfiddle.net/Uc4CE/
<div class="well">
<div class="input-prepend input-append">
  <span class="add-on">Some text</span>
  <input class="input" type="text" name="xxx" value="xxx" />
  <input type="hidden" name="next" value="xxx" />
  <input type="submit" value="xx" class="btn btn-info" />
</div>
</div>

解决方法

我正在寻找类似的东西,从 https://gist.github.com/mattjorn/5020957这个解决方案为我工作 – 将.input-block-level添加到你的外部div,

< div class =“input-prepend input-append input-block-level”>

然后扩展引导CSS,如下所示:

.input-prepend.input-block-level {
  display: table;
  width: 100%;
}

.input-prepend.input-block-level .add-on {
  display: table-cell;
  background-color: white;
}

.input-prepend.input-block-level > input {
  Box-sizing: border-Box;
  height: 30px;
  display: table-cell;
  width: 100%;
  border-left-style: none;
}

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...