Bootstrap - 输入不考虑网格大小/约束答案

【问题标题】：Bootstrap - Input not respecting Grid size/RestraintsBootstrap - 输入不考虑网格大小/约束
【发布时间】：2018-05-22 17:36:47
【问题描述】：

我无法在其他地方找到我的问题的任何答案，也无法在此处找到以前的帖子。

我正在为内部工作目的开发一个网站，并且只是在尝试让事情在家里工作。我不确定我是否做错了什么或者是否有错误，或者我应该使用另一个 JS UI。

我需要的 UI 是选项卡、网格系统和表单输入。到目前为止，Bootstrap 似乎是我找到的最佳选择。我选择了 4.0.0.beta2，因为它是最新的。除了输入元素、文本、数字等之外，一切都有效。当我将它们放入带有引导程序的网格系统中时，输入元素不遵守网格大小。所有其他表单元素都可以。

这是我当前的测试页面，没有任何额外的混乱。输入类型在右侧的网格之外流动。我尝试过表单组、移动东西、不同的大小、输入类型，几乎所有我能想到的东西。（编辑 - 将 detail-row 更改为应有的行，但仍未解决问题）

<!DOCTYPE html>

    <html lang=en>
    <head>
      <!-- Standard Meta -->
  <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
    <!-- Site Properties -->    
    <link rel="stylesheet" href="css/bootstrap.4.0.0.beta2.min.css">    

<title> -- </title> 
</head>

<body>
<div id="viewport" class="container">

<div class="row">
<div class="col-sm-2">Type</div>
<div class="col-sm-2">Vendor</div>
<div class="col-sm-3">Item</div>
<div class="col-sm-3">Note</div>
<div class="col-sm-1">Min Stock</div>
<div class="col-sm-1">To Order</div>
</div>


<div class="row">
  <div class="col-sm-2">Animal</div>
  <div class="col-sm-2">Bear</div>
  <div class="col-sm-3">Black</div>
  <div class="col-sm-3">Midnight</div>
  <div class="col-sm-1">0</div>
  <div class="col-sm-1">
    <input class="input-sm" id="item-87">
  </div>
  </div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.bundle.4.0.0.beta2.min.js"></script>  
</body>
</html>

旁注：如果我将输入类型封装在 Col / Row / Col 中，则在 main 之外带有标签，它将自身限制为列宽。但由于它们的大小不同，因此它与另一行的对齐不一致。

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-4

【解决方案1】：

将 .form-control 添加到您的 <input> 中，以便 Bootstrap 可以响应地将表单元素的宽度调整为列的 100%。

<input class="input-sm form-control" id="item-87">

另外，<div class="detail-row"> 缺少它的 .row 类；也许您打算使用：

<div class="detail row">

如果不指定新的.row，您在第一列之后的列将不正确地偏移。

【讨论】：

在这里修复了我的代码。看起来我以前在我的代码中修复了它，而不是在这里。虽然添加表单控件什么也没做。
您在输入中添加了form-control 的代码：bootply.com/cUn9Jx5MOA
谢谢。出于某种原因，这是在家工作，而不是在工作中。意思是我在某个地方有其他事情搞砸了。呃。

【解决方案2】：

我相信您应该将引导网格类应用于您的输入元素

类似

<input class="input-sm col-sm-12" id="item-87">

所以你的网格应该是这样的，

<div class="detail-row">
  <div class="col-sm-2">Animal</div>
  <div class="col-sm-2">Bear</div>
  <div class="col-sm-3">Black</div>
  <div class="col-sm-3">Midnight</div>
  <div class="col-sm-1">0</div>
  <div class="col-sm-1">
    <input class="input-sm col-sm-12" id="item-87">
  </div>

【讨论】：

这不起作用，因为您将一列放在一列中。但无论如何我都试过了。 - 不过谢谢。