有没有办法强制布局模式

Question

我使用1个模板添加或编辑我的模型。

当我引入一个模态窗口时，这个1模板重用会中断。我宁愿强迫bootstrap在模态窗口内使用模式xs，sm。

问题

模态窗口中所需的外观

问题：

有没有人知道如何在没有2个独立视图的情况下实现此效果？

让我在模态窗口容器上指定的解决方案：

.force-sm
.force-xs

我正在使用angularjs，所以如果不能用100％css方法完成，可能是一种动态方法。

现在我的工作是增加模态窗口的宽度。

Answer 1

我喜欢这个问题！坦率地说，令我惊讶的是它并没有被引入Bootstrap，因为一旦我想到它，它就非常简单和多功能了......创建自定义后代类（modal-col-*），仅在.modal-body下降时应用，并定义其宽度，如Bootstrap的列宽。所以：

.modal-body .modal-col-12{width:100%} /* only applies when wrapped in .modal-body */

您可以对此进行推断并创建一组具有适当％宽度的类似类，并将它们添加到元素中，知道它只会在需要时触发，如下所示：

<div class="col-md-6 modal-col-12">Something</div>
<div class="col-md-6 modal-col-8">Something else</div>

以下是一个示例：http://www.bootply.com/g7fM6h7Mfx

Answer 2

好的，不是编辑我现有的答案，我认为这个答案同样有效，基于偏好...您也可以使用相同的原则完全覆盖Bootstrap的类，但应用于他们的库存类：< / p>

.modal-body > .col-md-6{width:100%}

同样，你可以推断，为你想要覆盖的任何一个类做同样的事情。

示例：http://www.bootply.com/jRVeZwjAfb

注意：我说这是基于个人偏好，因为我不喜欢覆盖/覆盖Bootstrap现有的类，并且更喜欢添加自定义类，以便可以随意打开/关闭它们影响别处的布局。但这似乎更符合您的要求。

Answer 3

似乎还有一点要添加另一个答案，但这个问题引起了我的兴趣，以至于我去创建了一个库来实现这个目标：https://github.com/shawntaylor/bootstrap-force-device

基本上，将自定义CSS添加到项目中，并将.force-xs（或sm，md，lg）添加到父div（在本例中为模态体），以强制封闭网格的行为就像它在声明的设备上：

<div class="modal-body force-sm">
  <div class="col-lg-4 col-sm-6 col-xs-7">.col-lg-4 .col-sm-6 .col-xs-7</div>      
  <div class="col-lg-4 col-sm-6 col-xs-5">col-lg-4 .col-sm-6 .col-xs-5</div>
...

Sample with lots of examples