Question

我有一个自助表格。它显示在我应该显示的桌面上。但是当我将屏幕尺寸更改为平板电脑尺寸或更小时，日期编号和主题私密之间没有填充/边距。

我知道修复，这不是问题。但我认为我没有使用正确的bootstrap-structure，因为我认为bootstrap通常会为你做这个？

<form action="" method="post">
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <label>Number</label>
                <input type="text" name="number" id="number" value="" class="form-control" placeholder="Number">
            </div>
            <div class="col-md-4">
                <label>Date</label>
                <input type="text" name="date" id="date" value="" class="form-control" placeholder="Date">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-md-8">
                <label>Subject</label>
                <input type="text" name="subject" id="subject" value="" class="form-control" placeholder="Subject">
            </div>
            <div class="col-md-4">
                <p style="margin-bottom: 5px;"><label>Private?</label></p>
                <label class="radio-inline"><input type="radio" name="private" value="1">Yes</label>
                <label class="radio-inline"><input type="radio" name="private" value="0">No</label>
            </div>
        </div>
    </div>
</form>

那么有谁能告诉我这里我做错了什么？

Answer 1

确实存在一些误用。这是一个例子：

<form>
  <div class="row">
    <div class="col-md-8">
      <div class="form-group">
        <label>Label</label>
        <input class="form-control" type="whatever">
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <label>Label</label>
        <input class="form-control" type="whatever">
      </div>
    </div>
  </div>
  <!--some more rows if you have, or whatever. This is just an example -->
</form>

Bootstrap 3 - 小型设备上没有网格系统的边距/填充

1 个答案: