javascript - Bootstrap 在不使用网格系统的情况下在组合输入字段上设置宽度

Question

我试图在 Bootstrap 中使用组合输入构建一些字段。我能够这样做，但现在我想设置输入框的宽度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-group w-100">
  <span class="input-group-text w-20">Create</span>
  <input type="number" class="form-control" placeholder="Number of items" value =1/>
  <select class="form-control w-10" id="searchAssemblyType">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Both</option>
  </select>
  <input  class=" form-control w-70" type="text" id="partNumberInput" aria-describedby="enter Number" autocomplete="off" placeholder="Search Items .." >
</div>

我试图分配 w-100到外部<div>并将 w-something 分配给内部项目，但这似乎不起作用。有没有一种方法可以在不求助于复杂网格的情况下为这些输入分配宽度？

Answer 1

我建议您使用 Bootstrap Grid System 来组织您的布局，但如果您仍想使用相对于父级的 width 来解决您的解决方案。您可以检查 width & height utility classes docs .

基本上，您使用了错误的实用程序类。对于 width， Bootstrap 提供其中五个 w-100。 w-75、w-50、w-25 和 w-auto。所以你应该将你的代码更改为这个片段:

<div class="input-group w-100">
  <span class="input-group-text w-25">Create</span>
  <input type="number" class="form-control" placeholder="Number of items" value =1/>
  <select class="form-control w-25" id="searchAssemblyType">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Both</option>
  </select>
  <input  class=" form-control w-75" type="text" id="partNumberInput" aria-describedby="enter Number" autocomplete="off" placeholder="Search Items .." >
</div>

检查这个 working code sample .

另一种解决方案是为每个标签元素声明您自己的类，并使用自定义 CSS 相应地为它们提供 width。