Question

所以我有一个带有多选元素的bootstrap.js Jumbotron。默认情况下，元素足够大以适应最大的字符串（自然）。我喜欢它伸展到Jumbotron的宽度。我可以使用自定义CSS来做到这一点，但感觉我应该使用引导程序的内置功能来执行此操作，而不是在此处编写自己的CS。

我是一个引导新手，所以我所知道的只是在Jumbotron中似乎不起作用的列功能。通过编写自己的CSS来实现效果，我做错了什么/傻/无意义？即有更好的方法吗？谢谢！

更新：

当然，抱歉，应该准备一个jsfiddle。试试这个：

https://jsfiddle.net/eve6q969/

相关部分是：

<div class="container">
    <div class="jumbotron">
        <h3>My Items</h3>

        <form>
        <div class="form-group">
        <select id="ItemsSelect" size="10" multiple>
            <option >Item # 1</option>
            <option >Item # 2</option>
            <option >Item # 3</option>
        <select>
        </div>
        </form>

        <a href="#newItem" class = "btn btn-default" data-toggle="modal">New Item</a>
        <a href="#" class = "btn btn-info">Edit Item</a>
        <a href="#" class = "btn btn-danger">Delete Item</a>
    </div>
</div>

我的选择器只需要适合＆＃34;项目1＆＃34;文字，但我希望它跨越Jumbotron（减去左/右边距空间）。

当然塞尔格的建议就像一个魅力：）

            <select class="full-width" id="mapsSelect" size="10" multiple>
                <option >Map # 1</option>
                <option >Map # 2</option>
                <option >Map # 3</option>
            <select>

行

.full-width{width: 100%;}

添加到我的css文件中。但我想知道我是否正在做正确的事情＆＃39;使用它的事情。

更新：

谢谢Teison，你是对的。我只需要form-control课程。像这样：

            <form>
            <div class="form-group">
            <select class="form-control" id="mapsSelect" size="10" multiple>
                <option >Map # 1</option>
                <option >Map # 2</option>
                <option >Map # 3</option>
            <select>
            </div>
            </form>

我以为我试过这个但是我睡着的大脑必须有一些愚蠢的东西。

谢谢！

Answer 1

所以是的，使用表单控件类是正确的答案。＆＃34;右＆＃34;从某种意义上说，我使用bootstrap.js进行格式化和放大css而不是自己做（这会破坏使用bootstrap.js的目的）。这是它的样子：

https://jsfiddle.net/2v9pqfrk/2/

 <link rel="stylesheet" href="bootstrap.min.css">   
 <body>

    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a href="#" class="navbar-brand">Items</a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse navHeaderCollapse">

                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Items <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#newItem" data-toggle="modal">New Item</a></li>
                    <li><a href="#">Edit Item</a></li>
                    <li class="active"><a href="#">Import Items</a></li>
                </ul>                   
            </div>

        </div>
    </div>

    <div class="container">
        <div class="jumbotron">
            <h3>My Items</h3>

            <form>
            <div class="form-group">
            <select id="ItemsSelect" size="10" multiple class="form-control">
                <option >Item # 1</option>
                <option >Item # 2</option>
                <option >Item # 3</option>
            <select>
            </div>
            </form>

            <a href="#newItem" class = "btn btn-default" data-toggle="modal">New Item</a>
            <a href="#" class = "btn btn-info">Edit Item</a>
            <a href="#" class = "btn btn-danger">Delete Item</a>
        </div>
    </div>

    <div class="container">

        <div class="row">
            <div class="col-md-3">              
                <h3><a class="btn btn-info" href="#">Import Items</a></h3>
                <p>Click here import Items with selected Item</p>               
            </div>
            <div class="col-md-3">              
                <h3><a class="btn btn-info" href="#">Item Upload</a></h3>
                <p>Click here to log in and upload items</p>
            </div>
        </div>

    <div>

    <div class="navbar navbar-default navbar-fixed-bottom >
        <div class="container">
            <p class="navbar-text pull-left">Items</p>

        </div>
    <div>

    <div class="modal fade" id="newItem" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"><h4>New Item</h4></div>
                <div class="modal-body"><p>New Item</p></div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default pull-right" data-dismiss="modal">Close</a>
                    <a href="#" class="btn btn-primary pull-right" data-dismiss="modal">Close</a>

                </div>
            </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>

 <body>

＆＃34;权利＆＃34;使元素填充jumbotron

1 个答案: