Question

我正在尝试使该引导表单上的标签在移动设备和台式机屏幕上均能正确定位。

在这里拨弄

请注意在窄屏上的效果如何

但是在宽屏幕上搞砸了：

这与float或padding有关吗？

一个输入的html示例为：

                <div class="col-sm-4">
                <div class="form-group">
                    <label for="surname" class="col-sm-2 control-label">Surname</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control person surname"
                               style="text-transform: uppercase" data-property="surname"
                               placeholder="SURNAME" th:field="*{person.surname}"/>
                    </div>
                </div>
            </div>

更新我将lg添加到第一行，但标签的问题相同：https://jsfiddle.net/DTcHh/93188/

更新2

使标签看起来像这样：

<label for="surname" class="control-label">Surname</label>

也不起作用

Answer 1

Bootstrap带有用于不同屏幕宽度的不同类。网格类

Bootstrap网格系统具有四个类：

    xs (for phones - screens less than 768px wide)
    sm (for tablets - screens equal to or greater than 768px wide)
    md (for small laptops - screens equal to or greater than 992px wide)
    lg (for laptops and desktops - screens equal to or greater than 1200px wide)

可以将上述类组合在一起以创建更多动态和灵活的布局。

提示：每个类都按比例增加，因此，如果您希望为xs和sm设置相同的宽度，则只需指定xs。

您需要添加诸如col-lg-4之类的内容，以使其在更宽的屏幕上看起来不错。

您可以参考：https://www.w3schools.com/booTsTrap/bootstrap_grid_system.asp

Answer 2

您使用的是哪个版本的引导程序？我看到您的CSS是3.0.0版，但是您的js文件呢？这是版本4的样子：

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

body {
  margin: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Subject</h3>
  </div>

  <div class="panel-body">

    <div class="row">
      <div class="col-sm-3">
        <div class="form-group">
          <label class="col-sm-4 control-label">NID</label>
          <div class="col-sm-8 input-group nid">
            <input type="number" class="form-control inputnid person text-uppercase" data-property="nid" id="nid" placeholder="NID" th:field="*{person.nid}" />
          </div>
        </div>
      </div>

      <div class="col-sm-4">
        <div class="form-group">
          <label for="surname" class="col-sm-2 control-label">Surname</label>
          <div class="col-sm-10">
            <input type="text" class="form-control person surname" style="text-transform: uppercase" data-property="surname" placeholder="SURNAME" th:field="*{person.surname}" />
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label for="firstname" class="col-sm-4 control-label">Firstname(s)</label>
          <div class="col-sm-8">
            <input type="text" class="form-control  person" data-property="firstname" placeholder="Firstname" th:field="*{person.firstname}" />
          </div>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="form-group">
          <input type="text" class="form-control  person" data-property="middlename" placeholder="Middlename" th:field="*{person.middlename}" />
        </div>
      </div>

    </div>
    <div class="row">

      <div class="col-sm-5">
        <div class="form-group">
          <label for="streetAddress" class="col-sm-2 control-label">Address</label>
          <div class="col-sm-10">
            <input type="text" class="form-control address" id="address" data-property="formattedAddress" placeholder="Street Address" th:field="*{person.address}" />
          </div>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="form-group">
          <label for="gender" class="col-sm-5 control-label left">Gender</label>
          <div class="col-sm-4">
            <select class="selectpicker form-control  person" data-property="gender" title="Choose" data-width="100px" name="gender" th:field="*{person.gender}">
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Unknown">Unknown</option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="form-group">
          <label for="dob" class="col-sm-2 control-label">DOB</label>
          <div class="col-sm-10">
            <div class="input-group date">
              <input type="text" class="form-control dob person" data-property="dob" name="dob" th:field="*{person.dob}" />
              <span class="input-group-addon">
													<span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="form-group">
          <label for="phonehome" class="col-sm-2 control-label">Ph</label>
          <div class="col-sm-10">
            <input type="tel" class="form-control  person" data-property="phoneHome" id="phonehome0" placeholder="Telephone No" th:field="*{person.phoneHome}" />
          </div>
        </div>
      </div>
    </div>


    <div class="row">


      <div class="col-sm-5">
        <div class="form-group">
          <label for="ethnicity0" class="col-sm-2 control-label">Ethnicity</label>
          <div class="col-sm-10">
            <select class="selectpicker form-control person ethnicity" data-property="ethnicity" name="ethnicity" id="ethnicity0" data-live-search="true" title="Choose" data-width="100%" th:field="*{person.ethnicity}">
              <option value="European">European</option>
              <option value="Maori">Maori</option>
              <option value="Indian">Indian</option>
              <option value="PI - Samoan">PI - Samoan</option>
              <option value="PI - Tongan">PI - Tongan</option>
              <option value="PI - Cook Island">PI - Cook Is</option>
              <option value="PI - Fijian">PI - Fijian</option>
              <option value="PI - Fijian Indian">PI - Fijian Indian</option>
              <option value="Niuean">PI - Niuean</option>
              <option value="PI - Other">PI - Other</option>
              <option value="Asian - Chinese">Asian - Chinese</option>
              <option value="Asian - Thailand">Asian - Thailand</option>
              <option value="Asian - Vietnamese">Asian - Vietnamese</option>
              <option value="Asian - Laos">Asian - Laos</option>
              <option value="Asian - Other">Asian - Other</option>
              <option value="Middle East - Iraq">Middle East - Iraq</option>
              <option value="Middle East - Iran">Middle East - Iran</option>
              <option value="Middle East Other">Middle East Other</option>
              <option value="African - South African">African - South African</option>
              <option value="African - Zimbawe">African - Zimbabwe</option>
            </select>
          </div>
        </div>
      </div>

      <div class="col-sm-5"></div>

      <div class="col-sm-2">
        <div class="form-group">
          <label for="phonemobile" class="col-sm-2 control-label">Pm</label>
          <div class="col-sm-10">
            <input type="tel" class="form-control  person" data-property="phoneMobile" id="phonemobile" placeholder="Telephone No" th:field="*{person.phoneMobile}" />
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 3

如果您想正确放置标签，则无需为它们分配类别，因为它们会自动放置在文本输入的顶部。

阅读有关http://getbootstrap.com/docs/4.1/components/forms/的文档

Bootstrap响应表单-标签放置

3 个答案: