Question

在.form-horizontal中按以下方式快速调整标签和表单控件的大小添加.form-group-lg或.form-group-sm。

我试图创建一个内联表单，并将表单中所有元素的默认大小更改为“大”或“ lg”大小。

每当我尝试结合Bootstrap文档提供的这两个示例（水平形式和内联形式）时，我似乎无法应用这些规则来解决我遇到的问题（确保在整页中运行）：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- The example code provided on the Bootstrap documentation:-->
      <!--<form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
      </form>-->


      <!-- What I am actually trying, is to add form-horizontal here (so that I can profit from the form-group-lg's functionality): -->
      <form class="form-inline form-horizontal">
        <!-- And form-group-lg here: -->
        <div class="form-group form-group-lg">
          <!-- And control-label here: -->
          <label for="exampleInputName2" class="control-label">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <!-- And control-label here -->
          <label for="exampleInputEmail2" class="control-label">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
      </form>
    </div>
  </div>
</div>

JSFiddle

表单元素的布局将被破坏（其中一个标签将流过输入，而第一个标签将流到容器元素之外）。在Bootstrap中如何处理？我应该只在输入中添加input-lg类吗？这样无法调整标签大小吗？

Answer 1

只需将col-lg-12（或根据您的需要的其他断点）添加到输入组的2个包装器中，即可使它们响应。

<div class="form-group form-group-lg col-lg-12">
          <!-- And control-label here: -->
          <label for="exampleInputName2" class="control-label">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group col-lg-12">
          <!-- And control-label here -->
          <label for="exampleInputEmail2" class="control-label">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>

Answer 2

问题是form-inline和form-horizontal的css相互冲突。

您无法合并，因为存在许多问题，例如来自form-horizontal的负边距和几个填充等。此规则是布局中断的原因。它根本不是实施以进行合并。

但是您可以在form-group-lg上使用form-group-sm和form-inline。有时候，像我下面所做的那样，有助于了解引导CSS，复制并使其适应您的需求：

来源：（bootstrap.css）

@media (min-width: 768px) {
  .form-horizontal .form-group-lg .control-label {
    padding-top: 11px;
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .form-horizontal .form-group-sm .control-label {
    padding-top: 6px;
    font-size: 12px;
  }
}

结果：（从.form-horizontal更改为.form-inline，并删除了填充）

@media (min-width: 768px) {
  .form-inline .form-group-lg .control-label {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .form-inline .form-group-sm .control-label {
    font-size: 12px;
  }
}

完成。 :)看下面的例子：

@media (min-width: 768px) {
  .form-inline .form-group-lg .control-label {
    font-size: 18px;
  }
}

@media (min-width: 768px) {
  .form-inline .form-group-sm .control-label {
    font-size: 12px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="form-inline">
        <div class="form-group form-group-lg">
          <label for="exampleInputName2" class="control-label">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2" class="control-label">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <div class="form-group form-group-sm">
          <label for="exampleInputEmail2" class="control-label">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
      </form>
    </div>
  </div>
</div>

在Bootstrap中内联表单时，如何使标签显示为“大尺寸”？

2 个答案: