div上的引导堆叠输入调整大小

Question

我想知道如何在调整包含div的大小时使用Bootstrap响应列,而不仅仅是视口大小.

我希望表单中的输入并排堆叠,因为我使模式更宽.

Html:

<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white" id="header" style="cursor: move">
            Modal
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          <form>
            <div class="form-row">
              <div class="form-group col-auto">
                <label for="Form1">Form1</label>
                <input type="text" class="form-control" id="Form1">
              </div>
              <div class="form-group col-auto">
                <label for="Form2">Form2</label>
                <input type="text" class="form-control" id="Form2" >
              </div>
              <div class="form-group col-auto">
                <label for="Form3">Form3</label>
                <input type="text" class="form-control" id="Form3">
              </div>
              <div class="form-group col-auto">
                <label for="Form4">Form4</label>
                <input type="text" class="form-control" id="Form4">
              </div>
            </div>
         </form>
        </div>
    </div>
</div>

小提琴:https://jsfiddle.net/p204kwjz/6/

当我放大包含div时,我可以使输入继续水平堆叠吗？问题是,当我将div扩大到足以使它们全部适合时,输入不是"流动的".此外,当包含div太小时,它们会水平溢出div.

这里的上下文是表单将动态创建,因此我需要某种智能布局.

Answer 1

如果您希望列在引导程序中占据整个宽度（水平堆叠），请col-md-12在表单上使用并将其包装在带有 class 的 div 中form-row。基本上 bootstrap 假设每行由 12 列组成。

<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white" id="header" style="cursor: move">
            Modal
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          <form>
            <div class="form-row">
              <div class="form-group col-md-12">
                <label for="Form1">Form1</label>
                <input type="text" class="form-control" id="Form1">
              </div>
              </div>
              <div class="form-row">              
              <div class="form-group col-md-12">
                <label for="Form2">Form2</label>
                <input type="text" class="form-control" id="Form2" >
              </div>
              </div>
              <div class="form-row">              
              <div class="form-group col-md-12">
                <label for="Form3">Form3</label>
                <input type="text" class="form-control" id="Form3">
              </div>
              </div>
              <div class="form-row">              
              <div class="form-group col-md-12">
                <label for="Form4">Form4</label>
                <input type="text" class="form-control" id="Form4">
              </div>
            </div>
         </form>
        </div>
    </div>
</div>

这是一把小提琴。