文本按钮不响应 CSS 样式
问题描述 投票：0回答：2
我正在使用 Bootstrap 5 制作一个网站，我正在尝试使用媒体查询使网站的标题图像响应。我喜欢它在台式机、笔记本电脑和平板电脑视口上的外观，但在移动设备上，我无法像在其他视口中那样使文本和按钮很好地适应。我希望文本和按钮在屏幕上居中，就像在桌面视口中一样，但是当我尝试更改 h1 和 h4 标签的字体大小时，移动媒体查询中没有任何反应。我还尝试将
display: none;display: none;这就是桌面上的样子
这就是手机上的样子
:root {
--desktop-min: 1200px;
--laptop-min: 900px;
--laptop-max: calc(var(--desktop-min) - 1px);
--tablet-min: 720px;
--tablet-max: calc(var(--laptop-min) - 1px);
--mobile-min: 300px;
--mobile-max: calc(var(--tablet-min) - 1px);
}
#navbar-color {
background-color: hsl(210, 45%, 30%);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler {
border: 1px solid hsl(0, 0%, 100%);
outline: none;
box-shadow: none;
}
.carousel-inner img {
width: 100%;
height: 100%;
filter: brightness(0.6);
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
bottom: auto
}
.carousel-caption h1 {
font-size: 500%;
transform: uppercase;
text-shadow: 1px 1px 15px hsl(0, 0%, 0%);
}
.carousel-caption h4 {
font-size: 200%;
font-weight: 500;
padding-bottom: 1rem;
/* margin-top: -1.25rem; */
text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
}
/* .btn-primary {
background-color: hsl(18, 100%, 62%);
border-color: 1px solid hsl(18, 100%, 62%);
}
.btn-primary:hover {
background-color: hsl(18, 100%, 62%);
border-color: 1px solid hsl(18, 100%, 62%);
} */
#button {
background-color:hsl(18, 100%, 62%);
border: 1px solid hsl(18, 100%, 62%);
}
#button:hover {
background-color:hsl(24, 83%, 65%);
border: 1px solid hsl(24, 83%, 65%);
}
@media screen and (min-width: var(--laptop-min)) and (max-width: var(--laptop-max)) {
.carousel-caption {
top: 50%;
}
.carousel-caption h1 {
padding-top: 15px;
}
.carousel-caption h4 {
font-size: 140%;
font-weight: 400;
padding-bottom: .2rem;
margin-top: -1.25rem;
}
#button {
font-size: 95%;
padding: 8px 14px;
}
}
@media screen and (min-width: var(--tablet-min)) and (max-width: var(--tablet-max)) {
.carousel-caption {
top: 50%;
}
.carousel-caption h1 {
font-size: 350%;
padding-top: 10px;
}
.carousel-caption h4 {
padding-bottom: .1rem;
/* margin-top: -1.25rem; */
}
.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}
}
@media screen and (min-width: var(--mobile-min)) and (max-width: var(--mobile-max)) {
.carousel-caption {
top: 40%;
}
.carousel-caption h1 {
font-size: 50% !important;
padding-top: 5px;
}
.carousel-caption h4 {
font-size: 10%;
/* margin-top: -1.25rem; */
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.carousel-indicators {
display: none;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | Technovine Solutions</title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/test17.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<!-- <link rel="stylesheet" href="./css/login-modal.css"> -->
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
<div class="container">
<a href="/Bootstrap-Technovine/index.html">
<img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
</a>
<!-- TOGGLE MENU START -->
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon">
</button>
<!-- TOGGLE MENU CLOSE -->
<!-- TOGGLE MENU START -->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="/Bootstrap-Technovine/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
<li class="nav-item"><a href="/Bootstrap-Technovine/about.html" class="nav-link text-white" id="nav_object">About</a></li>
<li class="nav-item dropdown" id="dropdown">
<a class="nav-link text-white" href="/Bootstrap-Technovine/services.html" role="button" aria-expanded="false" id="servicesDropdown">
Services
</a>
<ul class="dropdown-menu">
<!-- <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li> -->
<!-- <li><hr class="dropdown-divider"></li> -->
<li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-Technovine/cctv.html">CCTV Services</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/datacenter.html">Datacenter Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/digital-signage.html">Digital Signage</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/gen-support.html">General Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/net-support.html">Network Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/pos.html">POS Services</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/telecom.html">Telecom Services</a></li>
</ul>
</li>
<li class="nav-item"><a href="/Bootstrap-Technovine/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>
<script>
// Get the Services dropdown link element
const servicesDropdown = document.getElementById('servicesDropdown');
// Redirect to the services page when the dropdown link is clicked
servicesDropdown.addEventListener('click', function(event) {
event.preventDefault(); // Prevent default link behavior
window.location.href = this.getAttribute('href');
});
// Add the hover effect on desktop devices
if (window.matchMedia('(min-width: 576px)').matches) {
// When the mouse enters the dropdown link, show the dropdown menu
servicesDropdown.addEventListener('mouseenter', function() {
this.setAttribute('aria-expanded', 'true');
this.nextElementSibling.classList.add('show');
});
// When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
servicesDropdown.addEventListener('mouseleave', function() {
this.setAttribute('aria-expanded', 'false');
this.nextElementSibling.classList.remove('show');
});
}
</script>
<!-- TOGGLE MENU CLOSE -->
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
<!-- SHOWCASE START -->
<section>
<div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="https://picsum.photos/seed/picsum/4900/3400" class="d-block w-100 c-img" alt="...">
<div class="carousel-caption ">
<h1 class="display-1 fw-bolder">Project___ Name_____</h1>
<h4 class=" text-uppercase" id="sub-header">Get your unique solution</h4>
<a href="/Bootstrap-Technovine/ticket-form.html" >
<button type="button"
class="btn btn-primary px-4 py-2 fs-5 "
id="button"
>
Submit a Ticket
</button>
</a>
</div>
</div>
<!-- class="bg-dark text-white text-center text-sm-start p-5 p-lg-0" -->
<!-- <div class="container">
<div class="d-flex align-items-center justify-content-center">
<div>
<h1><span class="text-primary">Technovine Solutions</span></h1>
<p class="lead py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<button type="button" class="btn btn-primary">Get Quote</button>
</div>
<img src="./src/img/logo-topnav.png" alt="Technovine Solutions logo" class="img-fluid d-none d-lg block"/>
</div> -->
</section>
<!-- SHOWCASE CLOSE -->
</body>
</html>2个回答
0
投票
投票
轮播组件的 Bootstrap 文档并没有真正提及轮播内部 HTML 内容的使用，但是可以做到
在轮播内部，
.carousel-inneroverflow: hidden所以我的问题是：你为什么在这里使用旋转木马？您的轮播中似乎只有一个项目。如果你在这里不使用轮播，它会简单得多并且代码也会少得多
0
投票
投票
也许这会对你有所帮助！
:root {
--desktop-min: 1200px;
--laptop-min: 900px;
--laptop-max: calc(var(--desktop-min) - 1px);
--tablet-min: 720px;
--tablet-max: calc(var(--laptop-min) - 1px);
--mobile-min: 300px;
--mobile-max: calc(var(--tablet-min) - 1px);
}
#navbar-color {
background-color: hsl(210, 45%, 30%);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-toggler {
border: 1px solid hsl(0, 0%, 100%);
outline: none;
box-shadow: none;
}
.carousel-inner img {
width: 100%;
height: 100%;
filter: brightness(0.6);
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
bottom: auto
}
.carousel-caption h1 {
font-size: 500%;
transform: uppercase;
text-shadow: 1px 1px 15px hsl(0, 0%, 0%);
}
.carousel-caption h4 {
font-size: 200%;
font-weight: 500;
padding-bottom: 1rem;
/* margin-top: -1.25rem; */
text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
}
/* .btn-primary {
background-color: hsl(18, 100%, 62%);
border-color: 1px solid hsl(18, 100%, 62%);
}
.btn-primary:hover {
background-color: hsl(18, 100%, 62%);
border-color: 1px solid hsl(18, 100%, 62%);
} */
#button {
background-color:hsl(18, 100%, 62%);
border: 1px solid hsl(18, 100%, 62%);
}
#button:hover {
background-color:hsl(24, 83%, 65%);
border: 1px solid hsl(24, 83%, 65%);
}
@media screen and (min-width: var(--laptop-min)) and (max-width: var(--laptop-max)) {
.carousel-caption {
top: 50%;
}
.carousel-caption h1 {
padding-top: 15px;
}
.carousel-caption h4 {
font-size: 140%;
font-weight: 400;
padding-bottom: .2rem;
margin-top: -1.25rem;
}
#button {
font-size: 95%;
padding: 8px 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
.carousel-caption {
top: 50%;
}
.carousel-caption h1 {
font-size: 50px;
padding-top: 10px;
}
.carousel-caption h4 {
padding-bottom: .1rem;
/* margin-top: -1.25rem; */
}
.carousel-caption .btn {
font-size: 20px;
padding: 8px 14px;
}
}
@media screen and (min-width: 600px) and (max-width: 768px) {
.carousel-caption {
top: 40%;
}
.carousel-caption h1 {
font-size: 30px !important;
padding-top: 5px;
}
.carousel-caption h4 {
font-size: 20px;
/* margin-top: -1.25rem; */
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.carousel-indicators {
display: none;
}
}
@media screen and (min-width: 300px) and (max-width: 600px) {
.carousel-caption {
top: 30%;
}
.carousel-caption h1 {
font-size: 20px !important;
padding-top: 5px;
}
.carousel-caption h4 {
font-size: 17px;
/* margin-top: -1.25rem; */
}
.carousel-caption .btn {
font-size: 17px!important;
/*padding: 4px 8px;*/
}
.carousel-indicators {
display: none;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | Technovine Solutions</title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/test17.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<!-- <link rel="stylesheet" href="./css/login-modal.css"> -->
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Default"
disabled
href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
>
<link
rel="stylesheet"
data-purpose="Layout StyleSheet"
title="Web Awesome"
href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
>
<link
rel="stylesheet"
href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
>
<link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
<div class="container">
<a href="/Bootstrap-Technovine/index.html">
<img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
</a>
<!-- TOGGLE MENU START -->
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon">
</button>
<!-- TOGGLE MENU CLOSE -->
<!-- TOGGLE MENU START -->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="/Bootstrap-Technovine/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
<li class="nav-item"><a href="/Bootstrap-Technovine/about.html" class="nav-link text-white" id="nav_object">About</a></li>
<li class="nav-item dropdown" id="dropdown">
<a class="nav-link text-white" href="/Bootstrap-Technovine/services.html" role="button" aria-expanded="false" id="servicesDropdown">
Services
</a>
<ul class="dropdown-menu">
<!-- <li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li> -->
<!-- <li><hr class="dropdown-divider"></li> -->
<li><a class="dropdown-item text-capitalize text-white" href="/Bootstrap-Technovine/cctv.html">CCTV Services</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/datacenter.html">Datacenter Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/digital-signage.html">Digital Signage</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/gen-support.html">General Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/net-support.html">Network Support</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/pos.html">POS Services</a></li>
<li><a class="dropdown-item text-white text-capitalize" href="/Bootstrap-Technovine/telecom.html">Telecom Services</a></li>
</ul>
</li>
<li class="nav-item"><a href="/Bootstrap-Technovine/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>
<script>
// Get the Services dropdown link element
const servicesDropdown = document.getElementById('servicesDropdown');
// Redirect to the services page when the dropdown link is clicked
servicesDropdown.addEventListener('click', function(event) {
event.preventDefault(); // Prevent default link behavior
window.location.href = this.getAttribute('href');
});
// Add the hover effect on desktop devices
if (window.matchMedia('(min-width: 576px)').matches) {
// When the mouse enters the dropdown link, show the dropdown menu
servicesDropdown.addEventListener('mouseenter', function() {
this.setAttribute('aria-expanded', 'true');
this.nextElementSibling.classList.add('show');
});
// When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
servicesDropdown.addEventListener('mouseleave', function() {
this.setAttribute('aria-expanded', 'false');
this.nextElementSibling.classList.remove('show');
});
}
</script>
<!-- TOGGLE MENU CLOSE -->
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
<!-- SHOWCASE START -->
<section>
<div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fwww.livemint.com%2Flm-img%2Fimg%2F2023%2F07%2F10%2F1600x900%2F3-0-58230984-2BJP1XN-0_1679807674932_1689004151190.jpg&tbnid=Cr-XrZfWkquZbM&vet=12ahUKEwiv2aqwwuaAAxXbmicCHaJMB1gQMygBegQIARBu..i&imgrefurl=https%3A%2F%2Fwww.livemint.com%2Fopinion%2Fonline-views%2Fcyber-threats-are-worsening-in-today-s-digital-dystopia-11689003952132.html&docid=Ps2YYy-dnE4UfM&w=1600&h=900&q=cyber&client=firefox-b-d&ved=2ahUKEwiv2aqwwuaAAxXbmicCHaJMB1gQMygBegQIARBu" class="d-block w-100 c-img" alt="...">
<div class="carousel-caption ">
<h1 class="display-1 fw-bolder">Project___ Name_____</h1>
<h4 class=" text-uppercase" id="sub-header">Get your unique solution</h4>
<a href="/Bootstrap-Technovine/ticket-form.html" >
<button type="button"
class="btn btn-primary px-4 py-2 fs-5 "
id="button"
>
Submit a Ticket
</button>
</a>
</div>
</div>
<!-- class="bg-dark text-white text-center text-sm-start p-5 p-lg-0" -->
<!-- <div class="container">
<div class="d-flex align-items-center justify-content-center">
<div>
<h1><span class="text-primary">Technovine Solutions</span></h1>
<p class="lead py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<button type="button" class="btn btn-primary">Get Quote</button>
</div>
<img src="./src/img/logo-topnav.png" alt="Technovine Solutions logo" class="img-fluid d-none d-lg block"/>
</div> -->
</section>
<!-- SHOWCASE CLOSE -->
</body>
</html>
您应该使用制动点、标题元素和带有像素的按钮文本。 以下是一些刹车点： 300 像素， 600 像素， 768 像素, 992 像素, 1200 像素， 1510 像素, 1600 像素。
最新问题
- 如何统一使用来自不同包且具有相似接口的 Go 类型
- ID 测试在集合中发生多次，这将给出未定义的结果
- 如何在 Python 中强制 HTTP 连接使用 IPv4 而不是 IPv6？
- 如何将 3 或 4 行恢复到我的 .bashrc 以便与 Sdkman 一起使用？
- （已解决）Golang 的 Postgres Testcontainers：带有多个脚本的 WithInitScripts 不起作用
- 在 JavaFX 中将一个组件置于另一个组件中
- 我不断收到消息说“死代码”
- 使用字符串类型的变量调用 eval 会返回错误
- ODBC 驱动程序 Snowflake SSIS
- 如何用CSS独立设置普通和粗体字体粗细？
- 为什么刷新页面时我的 <audio> 不自动播放？ [重复]
- 为 Flutter 实现应用程序跟踪透明度
- 如何提取 URL 的特定字符串
- 添加 view-transition-name 属性时视图转换不起作用
- 如何在 Next.js 应用程序路由器中使用媒体查询？
- 添加代码点火器中选定范围的列值
- 调试错误的AVL树“插入”操作
- REGEXP_REPLACE 在 Databricks 中未按预期工作以向字符串添加空格
- 如何通过API控制网络摄像机AVIDSEN Visia
- 主幻灯片布局中的变量不会被 OpenTBS 替换
© www.soinside.com 2019 - 2024. All rights reserved.