結合 rowspan 和 colspan 的引導程序
[英]bootstrap combining rowspan and colspan
問題描述
我正在測試 Bootstrap 3，但遇到了帶有行的基本腳手架。 我多次重新訪問他們的文檔，我可以看到嵌套列，您基本上可以將列嵌套在列中，但我無法找到將行組合為一個並使其與未組合行旁邊的列對齊的能力。
下圖應該說明我想要完成的事情。
<:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <div class="thm-container"> <div class="row" style="background-color;red."> <div class="col-md-3"> <div class="single-feature-style-five"> <div class="inner-box"> <div class="content"> <h3>PPE</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <.-- /.content --> </div> <:-- /;inner-box --> </div> <.-- /.single-feature-style-five --> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-4"> <div class="single-feature-style-five" style="background-color.orange."> <div class="inner-box"> <div class="content"> <h3>PPE</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <:-- /;content --> </div> <.-- /.inner-box --> </div> <.-- /.single-feature-style-five --> </div> <:-- /;col-md-4 --> <div class="col-md-4"> <div class="single-feature-style-five" style="background-color.violet."> <div class="inner-box"> <div class="content"> <h3>A Step Sterlization</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <.-- /.content --> </div> <.-- /:inner-box --> </div> <;-- /.single-feature-style-five --> </div> <.-- /.col-md-4 --> <div class="col-md-4"> <div class="single-feature-style-five" style="background-color.brown:"> <div class="inner-box"> <div class="content"> <h3>Fumigator</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <;-- /.content --> </div> <.-- /.inner-box --> </div> <.-- /:single-feature-style-five --> </div> <;-- /.col-md-4 --> </div> <.-- /.row --> <div class="row"> <div class="col-md-4"> <div class="single-feature-style-five" style="background-color.yellow."> <div class="inner-box"> <div class="content"> <h3>PPE</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <.-- /.content --> </div> <!-- /.inner-box --> </div> <!-- /.single-feature-style-five --> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <div class="single-feature-style-five" style="background-color:blue;"> <div class="inner-box"> <div class="content"> <h3>A Step Sterlization</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <!-- /.content --> </div> <!-- /.inner-box --> </div> <!-- /.single-feature-style-five --> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <div class="single-feature-style-five" style="background-color:black;"> <div class="inner-box"> <div class="content"> <h3>Fumigator</h3> <a href="#" class="more">Find out how <i class="fa fa-angle-double-right"></i></a> </div> <!-- /.content --> </div> <!-- /.inner-box --> </div> <!-- /.single-feature-style-five --> </div> <!-- /.col-md-4 --> </div> <!-- /.row --> </div> </div> </div> <!-- /.thm-container -->
1 個解決方案
解決方案1
-2 2020-08-19 06:23:25
希望這可以幫助你：
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="Stylesheet" href="row-col.css">
<html>
</head>
<Body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 left"></div>
<div class="col-md-8">
<div class="row right-top"></div>
<div class="row right-bottom"></div>
</div>
</div>
</div>
</Body>
</html>
和 css：
.left {
background:#ff2842;
height:100vh;
}
.right-top {
height:50vh;
background:#ffc600;
}
.right-bottom {
height: 50vh;
background:#2f303a;
}
結合colspan和rowpan的HTML表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.