1

我开始在我的 web 项目中使用 Foundation 5，但它似乎充满了错误，而且表单验证根本不起作用。所以我切换到 Bootstrap。

但是，Foundation 中有一个名为 Pre/Postfix Labels & Actions 的功能（请参阅此处），我希望它在 Bootstrap 中。

我已经搜索和搜索，但找不到任何类似的东西。我可以使用 glyphicon glyphicon glyphicon-gbp 在我的表单输入之前显示“£”符号，但是我无法使用网格系统使其正确流动。

我在这里有一个 JS Fiddle：http: //jsfiddle.net/kAnjN/

这是我的 HTML：

<div class="container">
<form class="form-horizontal">
    <div class="form-group">
        <label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
        <div class="col-sm-4">
            <span class="glyphicon glyphicon-gbp"></span>
            <input type="text" name="monthly_rent" class="form-control">
        </div>
    </div>
</form>

有人有建议吗？我是一名 PHP 开发人员，这样的前端事情让我很沮丧！Bootstrap 和 Foundation 应该使它更容易并且只是“工作”，但我总是需要花费几个小时来寻找解决小问题的方法。

我基本上想实现上面的 Foundation 链接上的内容。

4

1 回答 1

1

使用.input-group类：

<label for="monthly_rent" class="col-sm-2 control-label">Monthly Rent</label>
<div class="col-sm-4">
<div class="input-group">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-gbp"></span>
    </span>
        <input type="text" name="monthly_rent" class="form-control">
</div>
</div>

例子

于 2013-12-30T18:41:04.547 回答