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并将其包装在类form-row的div中。基本上，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>

Here is a fiddle.

Answer 2

表单组和col-auto类的播放效果不佳。您可以通过在表单组中嵌套col-auto来实现流体输入

fiddle

<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">
          <div class="col-auto">
            <label for="Form1">Form1</label>
            <input type="text" class="form-control" id="Form1">
          </div>
        </div>
        <div class="form-group">
          <div class="col-auto">
            <label for="Form2">Form2</label>
            <input type="text" class="form-control" id="Form2">
          </div>
        </div>
        <div class="form-group">
          <div class="col-auto">
            <label for="Form3">Form3</label>
            <input type="text" class="form-control" id="Form3">
          </div>
        </div>
        <div class="form-group">
          <div class="col-auto">
            <label for="Form4">Form4</label>
            <input type="text" class="form-control" id="Form4">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 3

您正在使用bootstrap 4。在bootstrap 4中，如果您编写介质，比如2个div-cold-6并在较小的屏幕中使用，则div占用整个宽度并发生堆叠，即：两个div都是一个在另一个之上。

div {
  display: flex;
  margin: 0px;
  padding 0px;
}

.col-md-6 {
  /* Assuming that col-md-6 width is 1000px */
  width: 1000px;
}

<div>
  <div class="col-md-6" style="background-color:red;">
    Sri harsha
  </div>
  <div class="col-md-6" style="background-color:blue;">
    Achyuthuni
  </div>
</div>

这是因为，与Bootstrap 3不同，Bootstrap 4是使用弹性盒制作的。要了解flex的工作原理，请查看此link

通过方便的table了解Bootstrap网格系统的各个方面如何跨多个设备工作。

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

3 个答案: