Div 在 bootstrap 中使用而不是 table
Div using instead of table in bootstrap
我正在使用 div 创建一个 table 但我可以创建,但是我想为 title.And 提供自定义的填充和边距,该样式应该适用于div.kindly 的内部内容找到下面的图片,code.I 完全需要它,但我不知道该怎么做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.wrapper-border{
border: 1px solid #e4e7eb;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 wrapper-border">
<div class="row" style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;">
<h5>TITLE</h5>
</div>
<div class="row" style="border-bottom:1px solid #e4e7eb; margin-bottom:20px">
<div class="col-sm-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
</div>
<div class="col-sm-6">
<div class="row col-md-8 col-sm-12">
Januvary - Friday
Monday - saturdauy
</div>
</div>
<div class="col-sm-6">
The purpose of lorem ipsum is to create a natural looking block
</div>
</div>
<div class="row" style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;">
<div class="col-sm-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
</div>
<div class="col-sm-6">
<div class="row col-md-8 col-sm-12">
Januvary - Friday
Monday - saturdauy
</div>
</div>
<div class="col-sm-6">
The purpose of lorem ipsum is to create a natural looking block
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</body>
</html>
根据布局这里的实际问题我无法修改样式,包括 border-bottom。请帮助我根据需要对齐的布局进行修改。
.item + .item
(+) 符号表示应用样式的元素之后的元素
.section {
border: 1px solid #000;
}
.section .section-header {
border-bottom: 1px solid #000;
padding: 24px;
}
.section .section-body {
padding: 0 24px;
}
.section .section-body .item {
padding: 24px;
}
.section .section-body .item + .item {
border-top: 1px solid #000;
}
.other-items {
display: flex;
justify-content: space-around;
}
<div class="section">
<div class="section-header">
title header
</div>
<div class="section-body">
<div class="item">
<div class="other-items">
<div class="other-item">one</div>
<div class="other-item">two</div>
</div>
</div>
<div class="item">
<div class="other-items">
<div class="other-item">one</div>
<div class="other-item">two</div>
</div>
</div>
<div class="item">
<div class="other-items">
<div class="other-item">one</div>
<div class="other-item">two</div>
</div>
</div>
</div>
</div>
下面是使用 Bootstrap 4
的解决方案。您可以使用 colspan=n
作为您的标题。当n
等于tr
中的列数
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped text-center">
<thead>
<tr>
<th colspan="2">Title for my Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
我正在使用 div 创建一个 table 但我可以创建,但是我想为 title.And 提供自定义的填充和边距,该样式应该适用于div.kindly 的内部内容找到下面的图片,code.I 完全需要它,但我不知道该怎么做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.wrapper-border{
border: 1px solid #e4e7eb;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 wrapper-border">
<div class="row" style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;">
<h5>TITLE</h5>
</div>
<div class="row" style="border-bottom:1px solid #e4e7eb; margin-bottom:20px">
<div class="col-sm-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
</div>
<div class="col-sm-6">
<div class="row col-md-8 col-sm-12">
Januvary - Friday
Monday - saturdauy
</div>
</div>
<div class="col-sm-6">
The purpose of lorem ipsum is to create a natural looking block
</div>
</div>
<div class="row" style="border-bottom:1px solid #e4e7eb;border-bottom: 1px solid #e4e7eb;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;">
<div class="col-sm-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p>
</div>
<div class="col-sm-6">
<div class="row col-md-8 col-sm-12">
Januvary - Friday
Monday - saturdauy
</div>
</div>
<div class="col-sm-6">
The purpose of lorem ipsum is to create a natural looking block
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</body>
</html>
根据布局这里的实际问题我无法修改样式,包括 border-bottom。请帮助我根据需要对齐的布局进行修改。
.item + .item (+) 符号表示应用样式的元素之后的元素
.section {
border: 1px solid #000;
}
.section .section-header {
border-bottom: 1px solid #000;
padding: 24px;
}
.section .section-body {
padding: 0 24px;
}
.section .section-body .item {
padding: 24px;
}
.section .section-body .item + .item {
border-top: 1px solid #000;
}
.other-items {
display: flex;
justify-content: space-around;
}
<div class="section">
<div class="section-header">
title header
</div>
<div class="section-body">
<div class="item">
<div class="other-items">
<div class="other-item">one</div>
<div class="other-item">two</div>
</div>
</div>
<div class="item">
<div class="other-items">
<div class="other-item">one</div>
<div class="other-item">two</div>
</div>
</div>
<div class="item">
<div class="other-items">
<div class="other-item">one</div>
<div class="other-item">two</div>
</div>
</div>
</div>
</div>
下面是使用 Bootstrap 4
的解决方案。您可以使用 colspan=n
作为您的标题。当n
等于tr
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped text-center">
<thead>
<tr>
<th colspan="2">Title for my Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>