输入组 - 两个彼此靠近的输入 [英] Input group - two inputs close to each other

查看：20
本文介绍了输入组 - 两个彼此靠近的输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何让输入组包含两个输入?

<input type="text" class="form-control" placeholder="MinVal"><input type="text" class="form-control" placeholder="MaxVal">

这不起作用，它们是水平的而不是内联的

解决方案

假设您希望它们彼此相邻:

<div class="form-group"><input type="text" class="form-control" placeholder="MinVal">

<div class="form-group"><input type="text" class="form-control" placeholder="MaxVal">

</表单>

JSFiddle

更新 Nr.1:如果你想在这个例子中使用 .input-group:

<div class="form-group"><div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" placeholder="用户名">

<div class="form-group"><div class="input-group"><input type="text" class="form-control"><span class="input-group-addon">.00</span>

</表单>

JSFiddle

.input-group 类用于使用按钮等(直接附加)扩展输入.复选框或单选按钮也是可能的.不过，我认为它不适用于两个输入字段.

更新编号.2: 使用 .form-horizo​​ntal，.form-group 标签基本上变成了 .row 标签，所以你可以使用列.col-sm-8 之类的类:

<div class="form-group"><div class="col-sm-8"><input type="text" class="form-control" placeholder="MinVal">
<div class="col-sm-4"><input type="text" class="form-control" placeholder="MaxVal">
</表单>

更新了所有三个示例的 JSFiddle

How can I make input group involves two inputs?

<div class="input-group">
    <input type="text" class="form-control" placeholder="MinVal">
    <input type="text" class="form-control" placeholder="MaxVal">
</div>

This doesn't work, they are horizontal instead of inline

解决方案

Assuming you want them next to each other:

<form action="" class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="MinVal">
    </div>
    <div class="form-group">    
         <input type="text" class="form-control" placeholder="MaxVal">   
    </div>
</form>

JSFiddle

Update Nr.1: Should you want to use .input-group with this example:

<form action="" class="form-inline">
    <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" placeholder="Username">
        </div>
    </div>
    <div class="form-group">    
        <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
    </div>
</form>

JSFiddle

The class .input-group is there to extend inputs with buttons and such (directly attached). Checkboxes or radio buttons are possible as well. I don't think it works with two input fields though.

Update Nr. 2: With .form-horizontal the .form-group tag basically becomes a .row tag so you can use the column classes such as .col-sm-8:

<form action="" class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-8">
            <input type="text" class="form-control" placeholder="MinVal">
        </div>
        <div class="col-sm-4">
            <input type="text" class="form-control" placeholder="MaxVal">
        </div>
    </div>
</form>

Updated JSFiddle with all three examples

这篇关于输入组 - 两个彼此靠近的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆