首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何将输入扩展到Bootstrap 3中列的宽度?

如何将输入扩展到Bootstrap 3中列的宽度?
EN

Stack Overflow用户
提问于 2014-11-25 14:37:26
回答 2查看 5.5K关注 0票数 1

我需要我的两个输入,其中放置内联有宽度的父div,其中定义了col-md-6col-md-3。现在,输入是正确对齐的,但是有宽度,在一种情况下小于col-md-6,在第二种情况下,宽度大于col-md-3。如何使这些输入具有相应的宽度col-md-6col-md-3

代码语言:javascript
代码运行次数:0
运行
复制
<div class="col-md-9">
    <form action="" role="form" class="form-inline">
        <div class="col-md-6">
            <div class="form-group">
                <label for="iR" class="sr-only">i R</label>
                <input type="text" class="form-control" id="iR" placeholder="some mid long explanation" />
            </div>
        </div>
<div class="col-md-3">
            <div class="form-group">
                <label for="iS" class="sr-only">i S</label>
                <input type="text" class="form-control" id="iS" placeholder="some mid long explanation 2" />
            </div>
        </div>
</div>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-11-25 15:03:24

正如其他人所提到的,您需要使用内联表单指定自定义宽度。从医生那里

输入和选择具有宽度: 100%;默认情况下在引导中应用。在内联窗体中,我们将其重置为宽度: auto;因此多个控件可以驻留在同一行中。根据您的布局,可能需要额外的自定义宽度。

在这种情况下,需要为输入和表单组指定width: 100%

代码语言:javascript
代码运行次数:0
运行
复制
<div class="form-group" style="width: 100%">

代码语言:javascript
代码运行次数:0
运行
复制
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />

JSFiddle中的工作实例

票数 3
EN

Stack Overflow用户

发布于 2014-11-25 14:50:19

只需将style=“宽度: 100%;”放在输入上;顺便说一下,您缺少了一个表单结束标记。

另外,如果您查看设置的任何元素的引导,它们在大部分时间都会留下一些空白。因此,如果不需要任何边距,只需将边距更改为0。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27129482

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档