为什么此代码不适用于 bootstrap!??选择 & Bootstrap 集成失败

Question

我正在使用 bootstrap，jquery 选自（https://harvesthq.github.io/chosen/ 修改 select 输入以提供更友好的用户界面。但是每当我在第二列中添加 select 输入类型时，它都会向第一列添加填充或边距（？）（如上面 JSFiddle 中的蓝色背景所示）。

有人知道为什么第一列的绿色背景没有完全覆盖第一列吗？它应该但它没有。如果我从第二列中删除 select 和按钮，一切似乎都很好。

我可以通过向该列添加填充来修改第一列的 css，但这会使其无响应，因为如果我调整浏览器的大小，它会改变需要的填充量。

代码：

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
    <div class="container">
        <div class="row" style="background-color: blue;">
            <div class="col-xs-5" style="background-color: green;">
                <select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
                    <option value=""></option>
                </select>
            </div>
            <div class="col-xs-7" style="background-color: purple;">
                <select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
                    <option value=""></option>
                </select>
                <button type="button" class="btn btn-primary">Add</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
    <script>
        jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
    </script>
</body>
</html>

Answer 1

        <div class="row" style="background-color: blue; line-height:35px;">
            <div class="col-xs-5" style="background-color: green;">
                <select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
                    <option value=""></option>
                </select>
            </div>

添加行高以定义背景然后正确渲染。

Answer 2

尝试使用 flex，给父 display: flex 和 flex: 5; flex: 7; 到子列

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
    <div class="container">
        <div class="row" style="background-color: blue; display: flex;">
            <div class="col-xs-5" style="background-color: green; flex: 5;">
                <select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
                    <option value=""></option>
                </select>
            </div>
            <div class="col-xs-7" style="background-color: purple; flex: 7;">
                <select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
                    <option value=""></option>
                </select>
                <button type="button" class="btn btn-primary">Add</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
    <script>
        jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
    </script>
</body>
</html>

为什么此代码不适用于 bootstrap!??选择 & Bootstrap 集成失败

Why doesn't this code work with bootstrap!?? Chosen & Bootstrap Integration failing

html

css

twitter-bootstrap

jquery-chosen