html - 在引导卡元素内创建一组按钮
问题描述
我的目标是在引导卡元素内创建一个“网格”按钮。它们应该与包含卡片的右边界对齐，并且应该在其中。稍后我会用图像填充这些按钮，以便获得多个图像按钮。
我写了以下内容：
HTML：
<div class="col-sm-20 card-deck mt-3">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div id="buttonpanel" class="container buttonpanel">
<div class="row">
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
<div class="w-100"></div>
<div class="box col">Filtri</div>
<div class="box col">Filtri</div>
</div>
</div>
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
<a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
<p class="card-text">Phone: <a href="tel:9">9</a></p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
<p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
</div>
CSS：
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
}
.buttonpanel {
position: relative;
right: 0;
height: 100%;
top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-top: 0;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
我的结果如下所示：
要求的结果：
解决方案
您需要对页面进行网格化，我只是将两个大的移动到<div>一行中，然后将它们分成两列<div class="col-md-6">，您可以看到我的代码（在整页中打开它）：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Office Registers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- JS files for Jquery/Jquery-ui -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
border: 1px solid white;
height: 80px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
My result
</style>
</head>
<body >
<div class="row mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="col-md-6">
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
<a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
<p class="card-text">Phone: <a href="tel:9">9</a></p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
<p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="w-100"></div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="w-100"></div>
<div class="box col">Column</div>
<div class="box col">Column</div>
<div class="box col">Column</div>
</div>
</div>
</div>
</div>
</body>
</html>我正在添加一个 flex 布局的示例（我相信您需要调整一些更改以获得更好的显示，这只是一个示例）：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Data Office Registers</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- JS files for Jquery/Jquery-ui -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<style>
.box {
background-color: #3C8DBC;
color: #fff;
text-align: center;
border: 1px solid white;
height: 80px;
}
h4, .h4 {
font-size: 1.4125rem;
font-weight: 500;
}
</style>
</head>
<body >
<div class="d-flex flex-row mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="p-2 flex-fill">
<div class="card-body">
<div id="id" style="display: none;">2 </div>
<h4 class="card-title">
<a href="/clinic/jeslinclinic/"> Dr Jeslin's Clinic</a>
</h4>
<h6 class="card-subtitle mb-2 text-muted">Label: <a href="/clinic/jeslinclinic/">jeslinclinic</a></h6>
<p class="card-text">Phone: <a href="tel:9">9</a></p>
<p class="card-text">About Clinic: Dr Jeslin's Eye Clinic is a topnotch Eye Clinic</p>
<p class="card-text"><a href="/clinic/jeslinclinic/">Homepage</a></p>
<p class="card-text">External Website: <a href="https://mysite">https://mysite</a></p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/clinic/jeslinclinic/editclinic" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-user-edit"></i>
</a>
<a href="/clinic/jeslinclinic/live" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-clipboard-list"></i> Waiting</a>
<a href="/clinic/jeslinclinic/seen" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check-circle"></i> Seen</a>
<a href="/clinic/jeslinclinic/register" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-book-open"></i> Register</a>
<a href="/clinic/jeslinclinic/checkin" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-check"></i> Checkin</a>
<a href="/clinic/jeslinclinic/doctor/edit/slots/2" class="btn btn-primary mr-1 mybtndocedit" data-id="2">
<i class="fas fa-th-large"></i> Consultation Time</a>
</div>
</div>
</div>
<div class="p-2 flex-fill">
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
<div class="d-flex">
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
<div class="p-2 flex-fill box">Column</div>
</div>
</div>
</div>
</body>
</html>推荐阅读
- python-3.x - 如何使用python beautifulsoup在表格中的行之间提取蓝色隐藏文本
- express - 节点 Escpos 在第二次尝试时打印图像
- spring-security - Spring LDAP 无法获取外部记录的记录
- python - Python - 如何在 selenium 中打印网站的 javascript 变量？
- php - Laravel 本地化 url
- java - 是否有任何选项在 proguard 道具文件中包含 Java 泛型类型
- java - 如果我们在接口中添加方法，我们如何在多个类中实现方法
- java - Android Studio 未从 Firebase 实时数据库中读取检索到的数据
- google-analytics - 维度和指标资源管理器与分析 API 之间的差异
- java - JSON应该在后台下载吗？