Html （引导4）容器对移动设备没有响应
我正在学校的一个小项目中使用Bootstrap4。我创建了一个布局，其中一些文本旁边有一个旋转木马。问题是，我右侧的转盘对除移动设备外的所有设备宽度都有响应。它在其他设备的宽度上都能完美调节，但由于某些原因，我的转盘对于移动设备来说太大了 感谢您的帮助 这是我的密码：Html （引导4）容器对移动设备没有响应,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在学校的一个小项目中使用Bootstrap4。我创建了一个布局，其中一些文本旁边有一个旋转木马。问题是，我右侧的转盘对除移动设备外的所有设备宽度都有响应。它在其他设备的宽度上都能完美调节，但由于某些原因，我的转盘对于移动设备来说太大了 感谢您的帮助 这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
<!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/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>
<title>deinUrlaub.at</title>
<link rel="icon" href="imgs/icon.png">
<link rel="stylesheet" href="mall.css">
</head>
<body>
<nav class="navbar navbar-expand-md py-4 bg-info navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="imgs/logoNAV.png" class="float-right rounded-circle" alt="deinUrlaub.at" width="100">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link h4 active" href="index.html">START</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="TOP-3.html">TOP 3</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="BILDERGALERIE.html">BILDERGALERIE</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="ÜBER.html">ÜBER</a>
</li>
</ul>
</div>
</nav>
<main class="p-4 justify-content-center">
<a href="index.html" class="btn btn-info btn-lg mb-4" >Zurück</a>
<div class="container-fluid">
<div class="float-right">
<div class="container ml-2 my-2">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="rounded" src="imgs/mallorcaBild1.jpg" alt="Los Angeles" width="800">
</div>
<div class="carousel-item">
<img class="rounded" src="imgs/mallorcabild2.jpg" alt="Chicago" width="800">
</div>
<div class="carousel-item">
<img class="rounded" src="imgs/mallorcabild3.jpg" alt="New York" width="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<h1>Mallorca</h1>
<h2 class="text-secondary">Mallorca bietet wunderschöne Strände mit einem traumhaften türkisen Meer.
</h2>
<br>
<p>Nicht ohne Grund ist Mallorca die beliebteste Baleareninsel, denn sie hält jede Menge für ihre
Besucher bereit. Egal wie man den Urlaub gestalten möchte, es gibt für jeden Geschmack etwas.
</p>
<br>
<p>
Strandliebhaber und Sonnenanbeter finden Ihr Glück an langen Stränden oder kleinen Buchten, umspült
von kristallklarem, azurblauem Wasser und gesäumt meistens mit feinem, weißen Sand. Das Mittelmeer
bietet aber noch viel mehr – für Wassersportler gibt es Angebote für zum Tauchen und Schnorcheln,
Segeln, sowie Kayakfahren und viel mehr.
</p>
<br>
<p>
An Land findet sich ebenso viel zu entdecken, etwa für Wanderer oder Radfahrer. Die einzigartige
Gebirgslandschaft der Serra de Tramuntana mit ihren pittoresken Bergdörfern laden zu Touren oder
Ausflügen im Mietwagen ein.
Wer auf Mallorca Urlaub machen will, wählt aus einer Vielzahl an Unterkünften aus, neben attraktiven
Hotels mit Poollandschaften, gibt es zudem ländliche Hotels, Apartments, sowie Ferienhäuser oder
Fincas.</p>
<div class="text-right">
<a href="#" class="btn btn-info btn-sm mr-5 mt-4" >Jetzt Buchen</a>
</div>
</div>
</main>
<footer class="container-fluid p-5 bg-info text-white text-left">
<div class="row">
<div class="column col-md-11">
<p>TEL: 0680 3336549</p>
<p>EMAIL: support.deinUrlaub@gmail.com</p>
</div>
<div class="column">
<br>
<p>© deinUrlaub.at</p>
</div>
</div>
</div>
</footer>
</body>
</html>
好的，我只是修正了它，没有在.container中写入特定的宽度，而是给它一个最小宽度和最大宽度（这将是我的特定宽度）。谢谢你帮助大家 将固定宽度设置为50pc，这对于所有设备都是固定的，您需要阅读更多关于单位的信息，以便您可以为您的设计选择最佳单位，px、rem、em、vh、vw等。。。这里是您不应该在自定义CSS中重写引导定义的类。这将在以后导致许多问题。另外，CSS单元pc是实验性的，没有很多浏览器支持它。不管我是使用pc还是px等。问题仍然存在，除了%，这一个在最右边（在右边的旋转木马旁边）给我带来了一些奇怪的条带。Hi@Nikiii:试试。container{max width:100vw；}。旋转木马内部img{对象匹配：覆盖；宽度：100vw；高度：100vh；}
h1 {
font-size: 65px;
}
p {
font-size: 23px;
}
.btn-sm {
padding-left: 20px;
padding-right: 20px;
font-size: 40px;
border-radius: 10px;
}
.container {
width: 50pc;
}
.carousel-inner img {
width: 100%;
height: 100%;
}