在 bootstrap modal 中添加两个 modal-content答案

【问题标题】：Add two modal-content inside bootstrap modal在 bootstrap modal 中添加两个 modal-content
【发布时间】：2020-07-11 13:53:15
【问题描述】：

我正在尝试在单个 modal 中添加两个 modal-content div。

<div class="modal fade" id="user_manage_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
         <!-- Assign Users -->
             <div class="modal-content">...</div>
         <hr>
         <!-- UnAssign Users -->
             <div class="modal-content">...</div>
    </div>
</div>

看起来很棒，但我想在两个 modal-content div 之间添加一条水平线。

输出如下所示：

我没有为此添加额外的 CSS。

预计之间只有一条简单的水平线：

是不是因为bootstrap modal 内不允许有多个modal-contents？

【问题讨论】：

你想让两个模态框在一起（中间没有空格）并且在它们之间有边框吗？
@TiagoMartinsPeres 更新了帖子。
您使用的是哪个 Bootstrap 版本？

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

您必须在 modal-content 中完成所有样式（因为您没有提供其余代码）

<div class="modal fade" id="user_manage_modal" data-keyboard="false" data-backdrop="static">
   <div class="modal-dialog">
        <div class="modal-content">
            <!-- Assign Users -->
           <hr>
          <!-- UnAssign Users -->
      </div>
  </div>

由于您只给出了一个片段，请注意以下结构 = 引导模式中的序列

<div class="modal fade" id="Modal-demo" tabindex="-1" role="dialog">
  <div class="modal-dialog" >
    <div class="modal-content"> 
      <div class="modal-header"> optional
      <div class="modal-body"> 
      <div class="modal-footer"> optional

由于这些类（以及附加的 js 代码）必须按顺序排列（并且 js 代码期望每个模态单独应用），因此对于“特殊用途”，您有两种选择

做所有的格式化，按钮附加在
```
<div class="modal-body">
```
或将所需的 css 复制到一个新的类中，例如
```
<div class="my-modal-content">
```
删除所有不需要的效果并基于它失去 js 功能（如果当然有一些附加或使用类描述）

【讨论】：