首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >具有100%宽度的引导格式的SelectBoxIt输入

具有100%宽度的引导格式的SelectBoxIt输入
EN

Stack Overflow用户
提问于 2013-12-12 17:26:31
回答 1查看 954关注 0票数 1

我使用SelectBoxIt输入(http://gregfranko.com/jquery.selectBoxIt.js/)在引导3水平形式。我希望输入随着表单的宽度而增长和折叠,但是当将宽度设置为100%时,它们最终会崩溃。

我创建了一个JSFiddle来展示我的问题,并想知道是否有人擅长CSS,可以提出解决方案或建议吗?

http://jsfiddle.net/oceanexplorer/a5AZF/

HTML

代码语言:javascript
复制
<form class="form-horizontal">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="form-group">
        <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Option1</label>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <select name="foo">
                <option value="1">Foo1</option>
                <option value="2">Foo2</option>
                <option value="3">Foo3</option>
                <option value="4">Foo4</option>
                <option value="5">Foo5</option>
                <option value="6">Foo with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
            </select>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="form-group">
        <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Option1</label>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <select name="foo">
                <option value="1">Foo1</option>
                <option value="2">Foo2</option>
                <option value="3">Foo3</option>
                <option value="4">Foo4</option>
                <option value="5">Foo5</option>
                <option value="6">Foo with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
            </select>
        </div>
    </div>
</div>
</form>

CSS

代码语言:javascript
复制
.selectboxit-container .selectboxit-options,
.selectboxit-container .selectboxit
{
    width: 100%;
}

.col-xs-8,
.col.sm-8,
.col-md-8,
.col-lg-8
{
    border: 1px solid black;
}

Javascript

代码语言:javascript
复制
$("select").selectBoxIt({
    autoWidth: false
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-12-12 17:47:53

将容器包含在第一条规则中:

代码语言:javascript
复制
.selectboxit-container .selectboxit-options,
.selectboxit-container .selectboxit,
.selectboxit-container {
    width: 100%;
}

http://jsfiddle.net/a5AZF/3/

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

https://stackoverflow.com/questions/20550109

复制
相关文章

相似问题

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