时间戳

首页 > 解决方案 > 当 Bootstrap 中的内联表单时，如何使标签显示为“大尺寸”？

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

问题描述

根据引导文档：

通过添加 .form-group-lg 或 .form-group-sm 在 .form-horizo​​ntal 中快速调整标签和表单控件的大小。

我正在尝试创建一个内联表单并将表单中所有元素的默认大小更改为“大”或“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类吗？不能以这种方式调整标签大小吗？

标签： htmltwitter-bootstraptwitter-bootstrap-3

解决方案

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

你不能把它们组合起来，因为有很多问题，比如 负边距和几个填充等。这个规则是你的布局中断的原因。它根本没有实现组合。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>

推荐阅读