我正在构建一个引导组件以放入客户端站点。他们仍在使用 Bootstrap 4.3。 Bootstrap 应该首先是移动的，但是当我检查我的开发站点时，它首先调用 .col-md 类而不是我拥有的 .col-6 类。当我检查并选择设备视图时，它不会像预期的那样折叠和堆叠。
移动设备上的按钮应各为 6 列，一旦达到中等尺寸（768px），它们应该均匀分布，但事实并非如此。
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<style>
.renewable-calc {
padding-top: 2%;
}
.btn-primary.ce-button {
width: 100%;
height: 48px;
padding: auto;
border: 4px solid #0079c1;
border-radius: 5px;
background: transparent;
color: #0079c1;
font-weight: bold;
cursor: pointer;
}
.btn-primary.ce-button:hover,
.btn-primary.ce-button:active {
background: #0079c1;
border-radius: 5px;
color: #ffffff;
font-weight: bold;
cursor: pointer !important;
}
.is-active {
background: #0079c1 !important;
border-radius: 5px !important;
color: #ffffff !important;
font-weight: bold !important;
}
.boxed-in {
background: #f5f5f5;
border-radius: 14px;
padding: 25px 30px;
}
input.numbers {
width: 100%;
max-width: 100%;
height: 48px;
border: 1px solid #cccccd;
border-radius: 5px;
padding-left: 10px;
}
.green-icon {
color: #639D36;
font-size: 84px;
}
.green-text {
color: #639D36;
font-weight: 700;
font-size: 28px;
}
.blue-result-text {
color: #0079C1;
font-size: 40px;
font-weight: 600;
}
.gray {
color: #929292;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container renewable-calc">
<div class="row g-0">
<div class="col">
<div class="row">
<div class="heading">
<h5>Percentage of renewable energy used</h5>
</div>
</div>
<div class="row selectors d-flex justify-content-space-between" id="rc-button-bar">
<div class="col-6 col-md mb-2">
<button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
</div>
<div class="col-6 col-md mb-2">
<button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
</div>
<div class="col-6 col-md mb-2">
<button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
</div>
<div class="col-6 col-md mb-2">
<button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
</div>
<div class="col-sm mb-2 d-flex align-items-center">
<input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input> <span class="boldtxt">%</span>
</div>
</div>
</div>
</div>
<div class="row mt-5 text-center">
<div class="col">
<h4>Greenhouse Gas Reduction (Yearly Equivalent) <a href="#" data-toggle="tooltip" title="This will have an explanation"><i class="fa fa-info-circle gray"></i></a> </h4>
</div>
</div>
<div class="row mt-3 boxed-in text-center">
<div class="col-12 col-md-4 mb-3">
<div class="row align-items-center justify-content-center">
<div class="col-6 col-md-12">
<i class="fa fa-tree green-icon"></i>
</div>
<div class="col-6 col-md-12">
<h6>Equal to planting</h6>
<span class="green-text"><span id="rc-tree">{ }</span> Trees</span>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-3">
<div class="row align-items-center justify-content-center">
<div class="col-6 col-md-12">
<i class="fa fa-car green-icon"></i>
</div>
<div class="col-6 col-md-12">
<h6>Equal to removing</h6>
<span class="green-text"><span id="rc-car">{ }</span> Cars</span>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-3">
<div class="row align-items-center justify-content-center">
<div class="col-6 col-md-12">
<i class="fa fa-recycle green-icon"></i>
</div>
<div class="col-6 col-md-12">
<h6>Equal to recycling</h6>
<span class="green-text"><span id="rc-recycle">{ }</span> tons of trash</span>
</div>
</div>
</div>
</div>
<div class="row mt-5 text-center">
<div class="col">
<h4>Typical Monthly Cost <a href="#" data-toggle="tooltip" title="This will have an explanation"><i class="fa fa-info-circle gray"></i></a></h4>
<span class="blue-result-text">~$<span id="monthly-cost">{ }</span></span>
<h5>per month</h5>
</div>
</div>
</div>
<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://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
//the calculator variables for the button bar
// let renewCalc = document.getElementById("rc-button-bar");
let twentyFive = document.getElementById("btn-25");
let fifty = document.getElementById("btn-50");
let eightyFive = document.getElementById("btn-85");
let oneHundred = document.getElementById("btn-100");
let treeOutput = document.getElementById("rc-tree");
let carOutput = document.getElementById("rc-car");
let recycleOutput = document.getElementById("rc-recycle");
let monthlyCost = document.getElementById("monthly-cost");
treeOutput.innerHTML = "100";
carOutput.innerHTML = "5";
recycleOutput.innerHTML = "0.5";
monthlyCost.innerHTML = "12.89";
twentyFive.addEventListener("click", function() {
treeOutput.innerHTML = "10",
carOutput.innerHTML = "0.5",
recycleOutput.innerHTML = "0.1",
monthlyCost.innerHTML = "4.33";
})
fifty.addEventListener("click", function() {
treeOutput.innerHTML = "45",
carOutput.innerHTML = "2",
recycleOutput.innerHTML = "0.244",
monthlyCost.innerHTML = "7.95";
})
eightyFive.addEventListener("click", function() {
treeOutput.innerHTML = "100",
carOutput.innerHTML = "5",
recycleOutput.innerHTML = "0.5",
monthlyCost.innerHTML = "12.89";
})
oneHundred.addEventListener("click", function() {
treeOutput.innerHTML = "140",
carOutput.innerHTML = "9",
recycleOutput.innerHTML = "0.98",
monthlyCost.innerHTML = "17.50";
})
var btnContainer = document.getElementById("rc-button-bar");
var btns = btnContainer.getElementsByClassName("ce-button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
(document.querySelector('.is-active')) ? document.querySelector('.is-active').classList.remove('is-active'): '';
this.classList.add('is-active');
});
}
</script>添加了视口元标记并修复了布局问题。