bootstrap 两个chosen-select 下拉第二个select无效，第一个却下拉了？

Posted 2023-04-15

第二个select 是clone 第一个select元素，现在下拉第二个select无效，第一个却下拉了，请问怎么解决？ 求大神指教 ！

我之前也碰到相同问题。这部分代码我刚才放在我的页面试了下，不会出现两个下拉框。具体我忘记我是怎么处理的了，看下js css引用是否正确，应该是bootstrap或jquery的问题。 参考技术A 你好，你这个问题解决了没有

在两个 Bootstrap 列之间创建用户定义的间隙

【中文标题】在两个 Bootstrap 列之间创建用户定义的间隙

【英文标题】：Create a user-defined gap between two Bootstrap columns

【发布时间】：2013-09-19 07:38:08

【问题描述】：

我想为我的界面创建小面板/仪表板。就我而言，我想要两个这样的面板

+-------------------------------+    +-------------------------------+
|                               |    |                               |
|                               |    |                               |
+-------------------------------+    +-------------------------------+

通常使用 Bootstrap 3 很容易。

<div class="row">
  <div class="col-md-5">
  </div>
  <div class="col-md-5 pull-right">
  </div>
</div>

问题是 col-md-2 的差距，就像这里的情况一样，太大了。我不能使用 col-md-1 间隙，因为这样两边的大小不相等。

我也尝试添加左右填充，但这也没有效果。我可以在这里做什么？

【参考方案1】：

这是另一种可能性：Live viewEdit view

您将看到它使用了 2 个 col-md-6，每个都有一个嵌套的 col-md-11，并且您将嵌套的行定位在右侧的第二个 div 中。

Ken 的建议有我喜欢的干净的 HTML。如果您的左右面板使用宽度由 Bootstrap 定义的元素（例如井或表单元素），则列填充可能会导致麻烦并破坏布局。在这种情况下，这种嵌套方法可能更容易。

HTML

<div class="container">
  <div class="row">

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-11">nested row col-md-11</div>
      </div><!-- end nested row -->
    </div>

    <div class="col-md-6">
      <div class="row">
        <div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
      </div><!-- end nested row -->
    </div>

  </div>
</div>

祝你好运！

【参考方案2】：

我已经发布了这个here，但它仍然与原始问题相关。

我在列之间的空间方面也遇到过类似的问题。根本问题是引导程序 3 和 4 中的列使用填充而不是边距。所以相邻两列的背景颜色会相互接触。

我找到了一个适合我们问题的解决方案，并且很可能适用于大多数尝试分隔列并保持与网格系统其余部分相同的装订线宽度的人。

这就是我们想要的最终结果

在列之间存在带有阴影的间隙是有问题的。我们不希望列之间有额外的空间。我们只是希望排水沟是“透明的”，这样网站的背景颜色就会出现在两个白色列之间。

这是两列的标记

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block 
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;

@media (max-width: 33.9em) // this is for our mobile layout where columns stack
    .raised-block 
        margin-left: -0.625rem;
    

.row [class^="col-"]:first-child>.raised-block 
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;

这种方法确实需要一个带有负边距的内部 div，就像引导程序使用的“行”类一样。而这个div，我们称之为“raised-block”，必须是列的直接兄弟

这样，您仍然可以在列内获得适当的填充。我已经看到似乎通过创建空间来工作的解决方案，但不幸的是，他们创建的列在行的任一侧都有额外的填充，因此它最终使行更薄，网格布局设计用于。如果您查看图像以获得所需的外观，这将意味着两列加在一起将小于顶部较大的那一列，这会破坏网格的自然结构。

这种方法的主要缺点是它需要额外的标记来包装每列的内容。对我们来说，这是可行的，因为只有特定的列需要它们之间的空间来实现所需的外观。

希望对你有帮助

【讨论】：

@media 查询后缺少一个左括号。此外，您提出的阻止规则添加了与问题不完全相关的边框和其他内容。否则，这似乎可以很好地工作而不会弄乱引导程序的默认设置。谢谢。

@Batman 感谢您发现错字。很高兴它对你有效。如果它对你有用，如果你投票赞成，我将不胜感激。

【参考方案3】：

您可以添加一个修改col-md-6 宽度的类。此类的宽度设置为50%。通过像这样减小宽度来实现更小的间隙：

.dashboard-panel-6 
   width: 45%;

将此添加到您的 div 元素中。这样col-md-6 的宽度规则就会被覆盖。

<div class="row">
  <div class="col-md-6 dashboard-panel-6">...</div>
  <div class="col-md-6 dashboard-panel-6">...</div>
</div>

【讨论】：

非常棒的解决方案。只是一个问题，如果有的话，pull-right 类在这种情况下会做什么？如果列是 6 和 6，我认为这无关紧要吗？

@ZekeDroid 确实，这只是混乱。删除它。

【参考方案4】：

您可以在内部使用另一个 div 并为其添加填充。

<div class="row">
  <div class="col-md-6">
    <div class="inner-div">
    </div>
  </div>
  <div class="col-md-6 pull-right">
    <div class="inner-div">
    </div>
  </div>
</div>

.inner-div
   padding: 5px;
 

【讨论】：

但这如何改变这样一个事实，即两列都只有 col-md-5 的大小？如果可行，我会这样做：5.5-1-5.5

@MaxRhan 您可以使用此解决方案，并且在第一个内部 div 上的右侧填充为 col-md-1 宽度的一半（在 992px 或更高处约为 4.666%）和第二个内部 div左侧有相同的填充。

我使用了这种方法并添加了一个媒体查询，以在col-md.. 变为屏幕宽度的 100%（在移动设备上）时删除间距。