为了给你一点背景知识,我对开发并不陌生,也学过各种不同的语言,但我在成长过程中对HTML的知识水平仍然更接近基础水平,而不是高级水平。
话虽如此,我目前正在开发这个项目,作为其中的一部分,我正在进行一个项目,在这个项目中,我正在创建一个完全响应的虚拟客户门户。我选择使用Bootstrap 5.3来解决这个问题,我对此进展顺利,但我面临着一个我似乎无法解决的特殊问题,我希望在座的一些更有经验和知识的人能帮助我,并尝试向我解释。
我的HTML示例如下:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
<div class="app-wrapper">
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6"><h3 class="mb-0">Home</h3>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item active"><a href="#">Home</a></li>
</ol>
</div>
</div>
</div>
</div>
<div class="app-content">
<div class="row">
<div class="col-md-6">
<div class="card-body">
<div class="card card-info card-outline mb-3">
<div class="card-header">
<div class="card-title">Quickly Connect with us on Whatsapp</div>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<div class="info-box">
<div class="info-box-content">
<div class="col-md-6">
<div class="info-box">
<button type="button" class="btn btn-success mb-2">Click here to start conversation</button>
</div>
<!---Using the text-center as identified in bootstrap help-->
<div class="info-box text-center">
<button type="button" class="btn btn-success mb-2 text-center">Click here to start conversation</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bootstrap.min.js"></script>
这将显示以下图像:
虽然我对此并不不满,而且事情的反应方面确实有效,但我希望更进一步,使其在视觉上更具吸引力,并希望将其转化为更像以下编辑后的图像。
预期产量:
我一直在浏览Bootstrap网站上的所有示例和文档,我发现在顶级div中使用文本中心类来集中其中的内容,但这对按钮不起作用。我曾尝试在多个级别上添加它,但它从未将按钮集中。
