gpt4 book ai didi

html - 我想在 twitter bootsrap 中将 col-sm-4 转换为底部的两列和一行

转载 作者:太空宇宙 更新时间:2023-11-04 09:01:50 24 4
gpt4 key购买 nike

Hai 我在一行中创建了三列 col-sm-4,col-sm-4,col-sm-4 并且每一列都必须在页脚处用两个相等的列和一行拆分。如下图所示,

This is the sample alignment image

我的代码是,

 <div class="container">    
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;">


<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="Images/150x80_4.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>

</div>
</div>

<div class="col-sm-4">
<div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;" >
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="Images/150x80_5.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-primary" onclick="location.href='game.aspx?id=2'" style="cursor: pointer;">
<div class="panel-heading">BLACK FRIDAY DEAL</div>
<div class="panel-body"><img src="Images/150x80_4.jpg" class="img-responsive" style="width:100%" alt="Image"></div>
<div class="panel-footer">Buy 50 mobiles and get a gift card</div>
</div>
</div>
</div>
</div>

请给出解决方案

最佳答案

您应该遵循以下结构..根据 Bootstrap 文档,所有新行都应该包含在 <div class="row"></div> 中.

所以你的 class="col-sm-12"根据您的问题,页脚处的一行也应该包含在新的 class="row" 中.

以上所有答案都有效,因为它们会创建一个新行,但它们没有正确遵循 Bootstrap 网格系统。

.col-sm-6 {
background-color: red;
height: 200px;
}
.col-sm-12 {
background-color: yellow;
height: 200px;
}
#col2 {
background-color: blue;
height: 200px;
}
.row {
border: 5px solid black;
}
<!DOCTYPE html>
<html>


<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


</head>
<body >
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6"></div>
<div id="col2" class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>

<div class="col-sm-4">
<div class="row">
<div class="col-sm-6"></div>
<div id="col2" class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>

<div class="col-sm-4">
<div class="row">
<div class="col-sm-6"></div>
<div id="col2" class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>
</div>
</div>

</body>

</html>

希望这对您有所帮助!

关于html - 我想在 twitter bootsrap 中将 col-sm-4 转换为底部的两列和一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42710734/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com