文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用bootstrap制作彩色盒子

问如何用bootstrap制作彩色盒子
EN

Stack Overflow用户

提问于 2020-07-13 02:36:38

回答 3查看 3.9K关注 0票数 1

Helo，我想创建一个小的彩色框来表示每个颜色的含义。我找到了那段代码，但不知道如何调整大小

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

我想要文本与方框并排，提前谢谢

html

css

bootstrap-4

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-07-13 02:45:01

您可以使用bootstrap网格系统来调整每个框的大小。你可以参考下面的代码-

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row">
<div class="col-2 p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="col-2 p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="col-2 p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="col-2 p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="col-2 p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="col-2 p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="col-2 p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="col-2 p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="col-2 p-3 mb-2 bg-white text-dark">.bg-white</div>
</div>

对于将块作为正方形，请使用以下命令-

.row{
  display:flex;
  justify-content:center;
}

.row>*{
  display:flex;
  height:200px ;
  width:200px ;
  justify-content:center;
  align-items:center;
  border: 1px solid black;
  margin: 10px;
}

*{
  background-color: CornSilk;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
</div>

如果你在寻找不同的东西，一定要让我知道。希望这能有所帮助！

票数 1

Stack Overflow用户

发布于 2020-07-13 02:47:29

你的结构是错误的。您可以将颜色并排放置在具有相同div的文本上。

它应该看起来像这样：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>


<div class="row"> <!-- Sometimes bootstrap override display -->
      <div class="col text-black">
       .bg-primary
      </div>
      <div class="col bg-primary">
       <div style="padding: 50px;"></div> <!-- For demonstration -->
      </div>
    </div>

票数 1

Stack Overflow用户

发布于 2020-07-13 02:55:20

如果你想得到一个旁边有文本的框，你必须在一个div中使用两个不同的div/span。因此，您可以使用bootstrap网格系统完成此操作，如下所示-

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
  <div class="col-6 p-3 mb-2 bg-primary text-white"></div><span class="p-3 mb-2"> => .bg-primary</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-secondary text-white"></div><span class="p-3 mb-2"> => .bg-secondary</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-success text-white"></div><span class="p-3 mb-2"> => .bg-success</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-danger text-white"></div><span class="p-3 mb-2"> => .bg-danger</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-warning text-white"></div><span class="p-3 mb-2"> => .bg-warning</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-info text-white"></div><span class="p-3 mb-2"> => .bg-info</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-light text-white"></div><span class="p-3 mb-2"> => .bg-light</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-dark text-white"></div><span class="p-3 mb-2"> => .bg-dark</span>
</div>
<div class="row m-2">
  <div class="col-6 p-3 mb-2  bg-white text-white"></div><span class="p-3 mb-2"> => .bg-white</span>
</div>

如果你希望这些块是方形的，你可以使用下面的代码-

.row>* {
  height: 200px;
  width: 200px;
  margin: 0 auto;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<div class="row m-2">
  <div class="bg-primary text-white"></div><span> => .bg-primary</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-secondary text-white"></div><span> => .bg-secondary</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-success text-white"></div><span> => .bg-success</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-danger text-white"></div><span> => .bg-danger</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-warning text-white"></div><span> => .bg-warning</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-info text-white"></div><span> => .bg-info</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-light text-white"></div><span> => .bg-light</span>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-dark text-white"></div>
  <spa> => .bg-dark</spa>
</div>
<div class="row m-2">
  <div class="p-3 mb-2  bg-white text-white"></div><span> => .bg-white</span>
</div>

您可以阅读有关bootstrap网格系统here的更多信息。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62865091

复制

相似问题

问如何用bootstrap制作彩色盒子
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用bootstrap制作彩色盒子EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用bootstrap制作彩色盒子
EN