Question

我还没有能够在其他地方找到我的问题的任何答案，也没有找到以前的帖子。

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

UI需要的是标签，网格系统和表单输入。 Bootstrap似乎是迄今为止我发现的最佳选择。因为它是最新的，我已经确定了4.0.0.beta2。一切都有效，除了输入元素，文本，数字等。当我将这些放在带引导程序的网格系统中时，输入元素不符合网格大小。所有其他表单元素都可以。

这是我当前的测试页面，没有任何额外的混乱。输入类型向右移动到网格外部。我尝试过表单组，移动东西，不同大小，输入类型，几乎我能想到的任何东西。（编辑 - 将详细信息行更改为刚才应该排的行，但仍未解决问题）

<!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的外部带有标签，它会将自身约束为列宽。但它与其他行不一致，因为它们的大小不同。

Answer 1

我相信您应该将bootstrap网格类应用于输入elemtnt

类似

<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>

Answer 2

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

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

此外，<div class="detail-row">缺少其.row类;也许你打算用：

<div class="detail row">

如果没有在第一个列之后指定新的.row，则会不正确地进行偏移。

Bootstrap - 输入不符合网格大小/约束

2 个答案: