css Bootstrap 5卡片瓦片位置添加冲突

snz8szmq  于 2023-01-28  发布在  Bootstrap
关注(0)|答案(2)|浏览(142)

我厌倦了使用bootstrap 5卡到我的附加图像像卡视图，有人知道如何正确地做引导5？
这里是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">

</head>
<body >

<!--Start main layout-->
<div class="wrapper">
    <div class="d-flex justify-content-center mt-5">
        <div class="">
            <div class="container">
            <div id="dynamic content" class="dynamic-content">
                <div class="row align-items-center animated flipInY slow delay-2s">
                    <div class="col-md-2 col-xs-12">
                        <div class="content" id="tile1">
                            <i class="fa fa-home fa-5x"></i>
                            <p>My Book</p>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="content" id="tile2">
                            <i class="fa fa-user fa-5x"></i>
                            <p>About</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="content" id="tile3">
                            <i class="fa fa-cogs fa-5x"></i>
                            <p>Services</p>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="content" id="tile4">
                            <i class="fa fa-comment fa-5x"></i>
                            <p>Feedback</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="content" id="tile5">
                            <i class="fa fa-briefcase fa-5x"></i>
                            <p>Portfolio</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="content" id="tile6">
                            <i class="fa fa-envelope fa-5x"></i>
                            <p>Contact</p>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="content" id="tile7">
                            <i class="fa fa-quote-right fa-5x"></i>
                            <p>Free Quote</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        </div>
    </div>

</div>
<!--End of main layout-->
</body>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</html>

谢谢

css

2条答案

按热度按时间
8zzbczxx

8zzbczxx1#

使用Bootstrap 5网格系统

使用类.row生成行，使用类.col生成列。
如Bootstrap 5 official website所述：* 每行有12个模板列可用，允许您创建跨越任意列数的元素的不同组合。列类指示要跨越的模板列数（例如，列4跨越4列）。*
这就是为什么我使用了四次.col-3。这四个.col-3构成了四个主要的"部分"。它们总共构成了每行最多12列（即3 * 4 = 12）。在这四个主要的"部分"中有一堆.row和.col。

您应该使用哪个. col？

按如下方式使用.col-5和.col-11：

  • .col-5在同一个.row中两次，如果您希望一行中有两个框，或者
  • .col-11在同一个.row中执行一次，如果您希望在一行中有一个框。

为什么是这两个（即. col-5和. col-11）？

为什么不使用.col-6和.col-12呢？如果您在同一个.row中使用.col-6两次，则这些框之间将没有任何空间。请记住，每行最多有12列!如果您使用.col-6两次，你填满了整行（6 * 2 = 12）。但是如果你使用.col-5两次，仍然有一些空间剩余（5 * 2 = 10）。

    • 在同一个.row中使用.col-5两次：**

    • 在同一个.row中使用.col-6两次：**

默认情况下，如果在同一个.row中使用.col-5两次（见第一张图），这两列将自己定位，以便它们之间有一些空间。
纯粹从美学Angular 使用.col-11。如果在具有两个.col-5的行的下方或上方使用.col-11，则这两行的宽度相同（如果使用.col-12，则该行将比其下方或上方的两个.col-5的行宽）。但为了使两行具有相同的宽度，你还需要添加.d-flex .justify-content-around到所有你想在一行中有两个框的行中，以"将这两个框彼此分开"，从而使该行与下面或上面的一个等宽。

其他的东西

水平对齐使用class .d-flex .justify-content-center，垂直对齐使用class .d-flex .align-items-center。使用这两个选项，您可以同时在所有这些框中水平和垂直居中您的内容（即Font Awesome图标和标题）。
要小心，如果你想居中文本（不是框，而是文本），你还需要像这样用<div class='text-center'>...</div> Package 你的Font Awesome图标和标题：

<div class='col-5 d-flex justify-content-center align-items-center one'>
    <div class='text-center'>
        <i class='fa fa-home fa-5x'></i>
        <div id='white'>My book</div>
    </div>
</div>

在HTML的末尾添加一个图像。像这样添加CSS：

  • position: absolute;和z-index: -100;以将其置于背景中（没有position: absolute;，z索引将不起作用，因此图像将不被置于背景中），
  • width: 100vw;和height: 100vh;，使图像的宽度和高度为全屏，以及
  • filter: blur(50px);添加模糊效果。

代码段

x一个一个一个一个x一个一个二个x

赞(0）分享  回复(0）举报  2023-01-28
goucqfw6

goucqfw62#

引导卡解决方案

具有最小的CSS

布局

#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Sheffield haworth </title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="row" id="groups">
      <div class="group col">
        <div class="row">
          <div class="card col item">
          </div>
          <div class="card col item">
          </div>
        </div>
        <div class="row">
          <div class="card col item">
          </div>
          <div class="card col item">
          </div>
        </div>
      </div>
      <div class="group col">
        <div class="row">
          <div class="card col item">

          </div>
        </div>
        <div class="row">
          <div class="card col item">

          </div>
          <div class="card col item">

          </div>
        </div>
      </div>
      <div class="group col">
        <div class="row">
          <div class="card col item">

          </div>
          <div class="card col item">

          </div>
        </div>
        <div class="row">
          <div class="card col item">

          </div>
        </div>
      </div>
      <div class="group col">
        <div class="row" style="width:138px">
          <div class="card col item">

          </div>
        </div>
        <div class="row" style="width:138px">
          <div class="card col item">

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

</html>

带样式

使用JavaScript实现自动化，但仍然易于使用CSS实现
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

带内容

const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})
#groups {
  min-width: 1140px;
}

body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Sheffield haworth </title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <div class="row" id="groups">
      <div class="group col">
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group col">
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Large</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group col">
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Large</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group col">
        <div class="row" style="width:138px">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
        <div class="row" style="width:138px">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

React灵敏

const colors = ["#2C78E2", "#43BB88", "#E27B2D", "#1A65AC", "#43BB88", "#8CC53E", "#E27B2D", "#E27B2D", "#B44BE8", "#2C78E2", "#2C78E2", "#8CC53E"];;
document.querySelectorAll('.item').forEach(function(e, i) {
  e.style.backgroundColor = colors[i];
})
body {
  background-image: url(https://i.imgur.com/W3BxqV7.png);
}

.item {
  height: 100px;
  margin: 5px;
}

.group.col {
  margin: 10px;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Sheffield haworth </title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <div class="row" id="groups">
      <div class="group col-md">
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group col-md">
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Large</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group col-md">
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Large</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group col-md">
        <div class="row" style="width:138px">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
        <div class="row" style="width:138px">
          <div class="card col item">
            <div class="card-body">
              <h5 class="card-title">Title</h5>
              <p class="card-text">Small</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
赞(0）分享  回复(0）举报  2023-01-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com