css - Bootstrap 布局移位器模式-6ren

css - Bootstrap 布局移位器模式

转载作者：行者123 更新时间：2023-11-28 15:16:43

24

4

您好，我正在尝试创建一个 layout shifter pattern使用 Bootstrap 4。

我已经设法将 2 个彩色框放在正确的位置以保持响应能力，但我无法将第 3 个框放在正确的位置。

请让我知道我该怎么做。这是我的 html 代码:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Layout Shifter</title>
  <link href="bootstrap.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <!-- navbar -->
  <nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Layout Shifter</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-12 col-md-2">
        <div class="blue"></div>
      </div>
      <div class="col-12 col-md-10">
        <div class="red"></div>
      </div>
      <div class="col-12 col-md-10">
          <div class="purple"></div>
      </div>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    crossorigin="anonymous"></script>
</body>

</html>

这是我的 CSS 代码:

.blue{
    width:100%;height:1100px;
    background-color:rgb(88, 88, 211);
}
.red{
    width:100%;height:550px;
    background-color:rgb(216, 90, 90);
}
.purple{
    width:100%;height:550px;
    background-color:rgb(168, 68, 214);
}
.orange{
    width:100%;height:550px;
    background-color:rgb(212, 135, 46);
}
.light-blue{
    width:100%;height:550px;
    background-color:rgb(160, 168, 238);
}
.container-fluid{
    padding:0;
}
.img-fluid{
    width:100%;
}
.bg-light{
    background-color: #384f3f !important;
}
.navbar-brand{
    color: white !important;
}
.nav-link{
    color: white !important;
}
.img-responsive{
    max-height:550px; 
    width:100%;
}
.navbar-toggler{
    color:white !important;
    border-color:white !important;
}

最佳答案

Boostrap 使用 12 网格列系统。您的代码中的问题是您有一个 2 宽的列 + 一个 10 宽的列 + 另一个 10 宽的列。前 2 个坐在单排 (2 + 10 = 12)。第三个被推倒了。为了达到预期的效果，您需要将 2 列中的行拆分为 2 宽度和 10 宽度的列，并在第二列下插入一个新行并将那些 2 10 列放在那里(但使它们成为 12 宽度“col-md -12"所以他们占据了整个空间)。这是 jsfiddle + 您感兴趣的代码: https://jsfiddle.net/Iulius90/t7vhza3g/1/

  <div class="container-fluid">
<div class="row no-gutters">
  <div class="col-12 col-md-2">
    <div class="blue"></div>
  </div>
  <div class="col-12 col-md-10">
    <div class="row no-gutters">
      <div class="col-12 col-md-12">
        <div class="red"></div>
      </div>
      <div class="col-12 col-md-12">
          <div class="purple"></div>
      </div>
    </div>
  </div>     
</div>

关于css - Bootstrap 布局移位器模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47022206/

24

4

0

文章推荐： css - VideoJs 宽高问题

文章推荐： javascript - 年季度 PHP/Javascript 模式

文章推荐： javascript - 当我更改 document.getElementById 时，Ajax 不起作用

文章推荐： javascript onclick 未按预期触发

JavaScript 移位
我想将这个无符号数:1479636484000 向右移动 7 位。这在 JavaScript 中可能吗？两者 1479636484000 >> 7 和 1479636484000 >>> 7 返回错
Matplotlib set_yticklabels 移位
鉴于以下代码: import matplotlib.pyplot as plt import numpy as np x = [1.0, 1.1, 2.0, 5.7] y = np.arange(le
.net - 数组的滑动窗口(移位)
我有一个低级键盘钩子(Hook)，目前允许我从任何应用程序(包括游戏)中控制媒体播放器。它通过查看捕获的特定击键来工作。我想扩展它以查找键的组合。我可以对一些逻辑进行硬编码，但我觉得必须有一种更合
C 移位(字符移位)!
我需要一些帮助来理解这段C代码。我不知道这里的“L”和“\”是什么？请也说明一点:) #define l2n(l,c) (*((c)++)=(unsigned char)(((l)>>2
c - 位操作(移位)
我正在查看一段代码: int result = 0 ; char byte = foo[j] for (i = 7 ; i>0 ; i--) { byte = (byte & ~0x1)>>1
C++ 数组复制/移位
我们有一个项目要求我们编写一个程序，允许用户输入一系列数字“将数字读入数组以进行进一步处理，用户通过输入负数表示他们已完成(负数不用于计算)，在读取所有数字后执行以下操作，总结输入的#，计算输入的#，
带字母表的 Python 移位
锁定。有disputes about this question’s content正在解决中。它目前不接受新的答案或互动。 def menu(): choice = input("Pres
java 位操作 >>> 移位
为什么如果 int x = -1 // binary: 11111111111111111111111111111111 x = x >>> 31; 我们有 000000000000000000000
Java:移位/旋转对象数组
我的问题其实应该很简单:我有一个玩家对象数组。(玩家[])我想要一个函数来旋转这个数组直到一个索引: public void rotateArray(Object[] array, int index
c++ - 移位 - 用新数字替换位集的一部分
我有一个编码为 boost 动态位集的数字列表。我根据此列表中的任何数字可以采用的最大值动态选择此位集的大小。所以假设我有从 0 到 7 的数字，我只需要三位，我的字符串 0,2,7 将被编码为000
c - 如何从不是字节对齐的源复制内存(移位)
我能想到一些令人讨厌的低效方法来完成这项任务，但我想知道最好的方法是什么。例如，我想复制一个字节中从第 3 位开始的 10 个字节，并像往常一样复制到一个指针。有没有比一次复制一个移位字节更好的方
c++ - Bison 移位/减少冲突无法解决
我正在尝试为该问题添加更多规则，并且该规则一直给我带来这种转变/减少冲突的能力，我不知道为什么会这样做，并且在过去的24小时内我一直在尝试解决问题 FuncDecl : RetTyp
c++ - 在相反方向上具有相同常数的C++移位，在较小的代码更改下结果不同
This question already has answers here: Why does it make a difference if left and right shift are us
Perl 打包/解包/移位
我在 Perl 中遇到这个问题已经有几天了，在搜索了无数的手册页、perldocs 和谷歌搜索了太多的搜索词之后，希望这里有人能帮助我。我得到两个表示十六进制值的字符串，即“FFFF”，而不是 Pe
html - 页面调整大小导致 Div 移位
我有一个主 div，两个 div 水平并排放置在这个父 div 中。 .parent{ height: 360px; margin-top: 0px; bo
CSS float 、移位、清除
我想 float 我的元素列表并从第二个元素创建一个移动效果。如何避免第二个 .item 之后的“清除”行为？ .shift { float: right; width: 50%;
c++ - 使用指针的 vector 移位
我正在使用 SSE3 优化我的代码。代码中有一点迫使我将 vector 中的所有元素移动一个元素 v[0] = 0 //v is some char* and N = v.size() for(i
c - 编辑此汇编代码以仅使用加/减/移位
.file "calcnew.c" .text .globl calcnew .type calcnew, @function calcnew:
java - Guava 缓存的复杂键(移位)
我有一个点对象: class Point { final int x,y; ... } 因为这些点将在我的代码中到处使用/创建，所以我想开始使用 guavas 缓存。不幸的是
python - 查找符号的小写(移位)形式
x = "Foo 890 bar *()" 如何将包括 "*()" 在内的小写字母“未移位”返回到 890？期望的结果: foo 890 bar 890 不需要的: x.lower() => "foo

首页

博学

6Ren·AI

商城

css - Bootstrap 布局移位器模式