Question

有了这个，我想在移动设备上实现堆叠的列，但是我在这里遇到了问题。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
  <title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
<div class="col-lg-1 col-md-1 col-sm-1 col-12 my-1 sortable position-relative">
  <a class="position-absolute" href="#">rb</a>
</div>
<div class="col-12 col-sm-11 col-md-11 col-lg-3 my-1 sortable position-relative">
  <a class="position-absolute" href="#">folder</a>
</div>
<div class="col-6 col-sm-3 col-md-3 col-lg-1 my-1 sortable position-relative">
  <a class="position-absolute" href="#">modtime</a>
</div>
<div class="col-6 col-sm-4 col-md-4 col-lg-2 my-1 ">
img
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
  <a class="position-absolute" href="#">width</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
  <a class="position-absolute" href="#">height</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
  <a class="position-absolute" href="#">filesize</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1 sortable position-relative">
  <a class="position-absolute" href="#">linked</a>
</div>
<div class="col col-sm-1 col-md-1 col-lg-1 my-1">
delete?
</div>
</div>
</div>
</body>
</html>

，您可以看到前两列没有任何特殊原因的重叠。为什么？

谢谢，德扬

更新正如下面所提到的，定位是造成问题的原因，谢谢大家的贡献

Answer 1

您只能将col类与不使用额外的 CSS 类一起使用。会在这里产生一个问题，那就是您想要的彼此之间没有相互重叠的地方，只需使用此代码即可

<div class="container">
<div class="row border-top border-bottom border-info">
  <div class="col">
    <a href="#">rb</a>
  </div>
   <div class="col">
    <a href="#">folder</a>
  </div>
   <div class="col">
    <a href="#">modtime</a>
  </div>
   <div class="col">
    <p>
    img
    </p>
  </div>
   <div class="col">
    <a href="#">width</a>
  </div>
   <div class="col">
   <a href="#">height</a>
  </div>
   <div class="col">
    <a href="#">filesize</a>
  </div>
   <div class="col">
    <a href="#">linked</a>
  </div>
  <div class="col">
    <p>
    delete?
    </p>
  </div>
</div>
</div>
</body>

如果您想在导航栏上使用，则只需使用此代码

<nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">rb</a>
                <a href="#" class="nav-item nav-link">folder</a>
                <a href="#" class="nav-item nav-link">modtime</a>
                <a href="#" class="nav-item nav-link">img</a>
                <a href="#" class="nav-item nav-link" tabindex="-1">width</a>
                 <a href="#" class="nav-item nav-link" tabindex="-1">height</a>
                  <a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
                   <a href="#" class="nav-item nav-link" tabindex="-1">linked</a>
                   <a href="#" class="nav-item nav-link" tabindex="-1">delete?</a>
            </div>
        </div>
    </nav>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  
  <title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row border-top border-bottom border-info">
  <div class="col">
    <a href="#">rb</a>
  </div>
   <div class="col">
    <a href="#">folder</a>
  </div>
   <div class="col">
    <a href="#">modtime</a>
  </div>
   <div class="col">
    <p>
    img
    </p>
  </div>
   <div class="col">
    <a href="#">width</a>
  </div>
   <div class="col">
   <a href="#">height</a>
  </div>
   <div class="col">
    <a href="#">filesize</a>
  </div>
   <div class="col">
    <a href="#">linked</a>
  </div>
  <div class="col">
    <p>
    delete?
    </p>
  </div>
</div>


<br><br>


<nav class="navbar navbar-expand-md navbar-light bg-light">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">rb</a>
                <a href="#" class="nav-item nav-link">folder</a>
                <a href="#" class="nav-item nav-link">modtime</a>
                <a href="#" class="nav-item nav-link">img</a>
                <a href="#" class="nav-item nav-link" tabindex="-1">width</a>
                 <a href="#" class="nav-item nav-link" tabindex="-1">height</a>
                  <a href="#" class="nav-item nav-link" tabindex="-1">
filesize</a>
                   <a href="#" class="nav-item nav-link" tabindex="-1">linked</a>
                   <a href="#" class="nav-item nav-link" tabindex="-1">delete?</a>
            </div>
        </div>
    </nav>




</div>
</body>
</html>

编辑或预览Here

有关Bootstrap 4 Grid System Here

的更多信息

有关Bootstrap 4导航栏Code and Example Here

的更多信息

bootstrap 4网格系统，前两列在移动设备上重叠

1 个答案: