Css Bootstrap 类似乎没有任何作用

发布于09月09日

我得到了一个Web应用程序的所有权，它是bootstrap(5)和html代码的混合体. 问题是，如果我试图用col-md-offset-4来推送一个列，它根本不起作用.

不只是colmd-Offset-4，任何colmd-Offset-*都不起作用.

<div class="container">
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
  </div>
</div>

推荐答案

语法略有不同:见here语法为class="col-md-4 offset-md-4"

[class*=col-] {
  background: yellow;
  margin: 2px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">


<div class="container">
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">

    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>