引导 COL 不起作用？ [复制]答案

【问题标题】：Bootstrap COL not working? [duplicate]引导 COL 不起作用？ [复制]
【发布时间】：2018-08-21 23:24:26
【问题描述】：

我右侧的按钮没有响应。宽度大就好了，不然好像调整不正确。

知道为什么吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-11">
    <h5 class="inline" style="vertical-align: sub"> Status: </h5>
    <span class="label label-warning label-lg-status">In Progress</span>
    <hr>
  </div>
  <div class="col-sm-1">
    <button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
  </div>
</div>

【问题讨论】：

似乎在您发布的 sn-p 中有效。另外，rows must be within a container.
没有告诉按钮调整大小。您正在控制 div，而不是按钮。查看@media css，了解有关根据屏幕尺寸进行调整的更多信息。
如果您不希望列堆叠，请使用 col-xs-*。

标签： html css twitter-bootstrap

【解决方案1】：

主要问题来自所需的引导列设置。如果您遵循文档，则必须将所有 <div class="row"> 设置在 <div class="container"> 或 <div class="container-fluid"> 内

所以如果你做得好，它会运作良好：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-11">
        <h5 class="inline" style="vertical-align: sub"> Status: </h5>
        <span class="label label-warning label-lg-status">In Progress</span>
        <hr>
      </div>
      <div class="col-sm-1">
        <button class="btn btn-danger deleteEnvironment" name="ENVU"> Delete</button>
      </div>
    </div>
</div>

【讨论】：

我的代码中有这个，但我仍然有同样的问题