为什么这段代码不能与引导程序一起使用！？？？选择和引导集成失败答案

【问题标题】：Why doesn't this code work with bootstrap!?? Chosen & Bootstrap Integration failing为什么这段代码不能与引导程序一起使用！？？？选择和引导集成失败
【发布时间】：2017-07-13 05:03:37
【问题描述】：

JSFiddle：https://jsfiddle.net/va4p7b7e/

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

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

我可以通过向列添加填充来修改第一列的 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>

【问题讨论】：

你到底想要什么，想去掉blue background..
对我来说看起来和工作都很完美，你能详细说明出了什么问题或添加截图吗？
您可能应该考虑重命名标题以提高问题的质量。

标签： css html twitter-bootstrap jquery-chosen

【解决方案1】：

尝试使用 flex，将 display: flex 给 parent 和 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>

【讨论】：

谢谢你，我忘记了，也没有意识到 flex 是我可以使用的东西。我的问题的最初目的是表明有一些东西使第一列中的选择输入在列中垂直居中（也可以在您的代码 sn-p 中看到）。但是您的回答使我朝着正确的方向前进，再次感谢

【解决方案2】：

        <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>

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

【讨论】：

我相信涉及 flex 的另一个答案是比硬编码像素值更优雅的解决方案，因为它适用于更多种类的输入间距问题，但感谢您的回复！