CSS - 使用引导程序无法正确堆叠的列
我正在尝试将一部分列堆叠成两行，每行四行。当我在这里和codepen上重新创建它时，列正确堆叠 - 正如我想要的那样，但在我的网站上，它们以三个为一组堆叠。必须有一条规则我不见了，但我看不到它。这就是它在我的网站上的样子 -
所有边距/宽度规则都是样式部分的一部分，所以我不确定为什么它在这里看起来像这样。我确信这是非常简单的事情，但我似乎无法发现它。任何帮助将不胜感激。
#whatwedo {
width: 100%;
max-width: 100%;
height: 600px;
}
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1{
font-size: 2.5rem;
font-family: 'Montserrat';
font-weight: normal;
color: #444;
text-align: center;
margin: 2rem 0;
}
.container-fluid {
width: 90%;
margin: 0 auto;
max-width: 80rem;
}
.cols{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.col-sm-3 {
width: calc(25% - 2rem);
margin: 1rem;
cursor: pointer;
}
.container{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.front,
.back{
background-size: cover;
background-position: center;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
/* size of box */
min-height: 300px;
width: 300px;
height: auto;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
}
.back{
background: #cedce7;
background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%);
background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%);
background: linear-gradient(45deg, #cedce7 0%,#596a72 100%);
}
.front:after{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
/* background shade - was .6 originally */
opacity: .4;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inner{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.container .back{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .front{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .back{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container:hover .front{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front .inner p{
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
}
.front .inner p:after{
content: '';
width: 4rem;
height: 2px;
position: absolute;
background: #C6D4DF;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}
.front .inner span{
color: rgba(255,255,255,0.7);
font-family: 'Montserrat';
font-weight: 300;
}<body>
<section id="whatwedo">
<div class="container-fluid">
<h1>What we do</h1>
<div class="cols">
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do2.png)">
<div class="inner">
<p>Brand Identity</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do4.jpg);">
<div class="inner">
<p>Graphic Design</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do7.jpg)">
<div class="inner">
<p>Editorial Design</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do1.jpg)">
<div class="inner">
<p>Brand Guidelines</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do3.jpg)">
<div class="inner">
<p>Print Management</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do6.jpg)">
<div class="inner">
<p>Signage</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do5.jpg)">
<div class="inner">
<p>Creative Direction</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="container">
<div class="front" style="background-image: url(images/what_we_do4.jpg)">
<div class="inner">
<p>Illustration & Animation</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
2 个答案:
答案 0 :(得分：1)
在
中使用col班级row
<div class="row">
<div class="col-sm-3"> </div>
<div class="col-sm-3"> </div>
<div class="col-sm-3"> </div>
<div class="col-sm-3"> </div>
</div>
答案 1 :(得分：1)
首先，确保您拥有正确的Bootstrap CDN 您必须了解Bootstrap网格系统。它将给定的行分成12个相等的列，您可以将它与类＃34; col - ** - *＆＃34; ...一起使用。 您需要两行中的4列，您的代码必须类似，
<div class="container">
<div class="row">
<div class="col-sm-3">
Your code here
</div>
<div class="col-sm-3">
Your code here
</div>
<div class="col-sm-3">
Your code here
</div>
<div class="col-sm-3">
Your code here
</div>
</div> <!-- end the first row -->
<div class="row">
<div class="col-sm-3">
Your code here
</div>
<div class="col-sm-3">
Your code here
</div>
<div class="col-sm-3">
Your code here
</div>
<div class="col-sm-3">
Your code here
</div>
</div> <!-- end the second row -->
</div> <!-- end the container -->
另外，不要在＆＃34; col - ** - *＆＃34;内使用。标签。 容器，宽度更大，会弄乱您的色谱柱。因此，请删除... 希望这个有效!! ：d
<div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
<div class="front" style="background-image: url(images/what_we_do2.png)">
<div class="inner">
<p>Brand Identity</p>
<span>Lorem ipsum</span>
</div>
</div>
<div class="back">
<div class="inner">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？