为什么元素在移动视图中断开[关闭]

问题描述 投票：0回答：1
我的网站在桌面视图中运行正常，但是当我进入chrome中的

“ toogle设备工具栏”选项并选择移动视图时，结果不是我想要的。例如，“手袋和离合器”的描述已分成许多行，超出了实际应有的行，并且包的图像变得太小。

这就是我想要的

这就是我得到的

HTML和CSS在下面。

.bg-light{ background-color: #fff!important; } .navbar-brand img{ max-width: 140px; } .navbar{ padding: 1.8rem 1rem!important; font-family:Karla,sans-serif;!important; font-size: 11px!important; } .mr-1, .mx-1 { margin-right: 2.25rem!important; } @media (min-width: 767.98px) { .navbar-expand-lg .navbar-nav .nav-link { color: #6b6a6af5; padding-right: 1.5rem !important; } } .form-infine{ margin-left: 24% } /*.col-lg-4 h1{ font-weight: 700; font-size: 65px; color: black; font-family: prata,serif }*/ .nav-link:hover{ opacity: 0.5; } .container{ /*padding-top: 25px !important; padding-bottom: 25px !important;*/ width: 82%; position: relative; } a{ text-decoration: none !important; } .margin { margin: auto; } .title{ font-family: 'Prata',serif; font-style: normal; font-weight: 700; font-size: 65px; transform: scaleY(1.2); } .txt-color{ color: black !important; } .detail{ font-family: 'Karla',serif; color: #48473d; margin-top: 2.9375rem; margin-bottom: 25px; font-size: 16px; line-height: 1.6; } .shop-now{ font-family: 'Karla',sans-serif; font-style: normal; font-weight: 700; position: relative; display: inline-block; font-size: 0.6875rem; color: #292929; } h3{ letter-spacing: 0.5px; transform: scaleY(1.1); font-weight: 600; font-size: 21px; color: #3e3a3a; font-family: prata,serif; } .position-relative{ position: relative !important; } .second{ font-family: 'Prata',serif; font-style: normal; font-weight: 700; font-size: 2.1875rem; transform: scaleY(1.2); } .txt_color{ color:#292929!important; } .text{ padding-top: 30%; padding-left: 20%; } hr{ margin-top: 5rem!important; margin-bottom: 5rem!important; } .small img{ height: 10; width: 50%; padding-bottom: 10%; } .sweater{ transform: scaleY(1.2); font-weight: 100!important; font-family: 'Prata',serif; font-style: normal; font-weight: 400; font-size: 1.25rem!important; padding-bottom: 2%; } /*@media (max-width: 767.98px) { .title{ font-size: 130%; } }*/
<!DOCTYPE html>
<html>
<head>
<title>shopify</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="./CSS/bootstrap.css">
<script type="text/javascript" src="./CSS/bootstrap.js"></script> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./CSS/b.css">
<!-- <link rel="stylesheet" type="text/css" href="../css/handify.css"> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
</head>
<body>
	<div class="container"> 
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
  			<a class="navbar-brand" href="#"><img src="images/handylogo.png" alt=""></a>
  			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    			<span class="navbar-toggler-icon"></span>
  			</button>
	       	<div class="collapse navbar-collapse" id="navbarNavDropdown">
				<ul class="navbar-nav">
			        <li class="nav-item ">
						<a class="nav-link" href="#">HOME</a>
			        </li>
				     <li class="nav-item dropdown">
				        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				          CATALOG
				        </a>
				    </li>
			        <li class="nav-item">
			        	<a class="nav-link" href="#">BLOG</a>
			        </li>
			        <li class="nav-item dropdown">
			        	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			              CONTACT
				        </a>
			        </li>
			      	<li class="nav-item">
				        <a class="nav-link s" href="#">ABOUT</a>
				    </li>
				    <li class="nav-item">
				        <a class="nav-link" href="#">THEME</a>
				    </li>
        		</ul>
				<div class="form-infine">
					<div class="collapse navbar-collapse" id="navbarNav">
						<div class="nav-item">
							<a class="nav-link" href="#">
								<!-- <div class="dropdown-toggle"> -->
								<select class="drp-dwn" style="border:none; color: #6b6a6af5">
								<option value="usd">USD</option>
								<option value="inr">INR</option>
								<option value="gbp">GBP</option>
								<option value="cad">CAD</option>
								<option value="aud">AUD</option>
								<option value="eud">EUD</option>
								<option value="jpy">JPY</option>
								</select>
							<!-- </div> -->
							</a>
						</div>
						<div class="nav-item">
							<a class="nav-link" style="color: #6b6a6af5;" href="#">LOGIN</a>
						</div>
						<div class="nav-item">
							<a class="nav-link" href="#"><img src="images/bag.svg" alt=""></a>
						</div>
						<div class="nav-item">
							<a class="nav-link" href="#"><img src="images/search.svg" alt=""></a>
						</div>
					</div>
				</div> 
			</div>
		</nav>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-sm-4 col-md-4 margin">
				<h1 class="title"><a href="#" class="txt-color">Our Core Collection</a></h1>
				<p class="detail">
					The pinnacle of versatility, our core collection is 
					flattering on all body types, looks great layered or alone,
					and is designed to span the seasons.
				</p>
				<a href="#" class="txt-color shop-now">SHOP NOW </a>
				<img class="img-fluid" src="images/capture.png" style="cursor: pointer;" alt="">
			</div>
			<div class="col-sm-8 col-md-8">
				<a href="#">
					<img class="img-fluid " src="images/first.jpg" alt="">
				</a>	
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12 col-12 col-md-12">
				<h3 class="text-center pt-5 pb-5">FEATURED COLLECTIONS</h3>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-6 col-6 col-md-6">
				<a href="#">
					<img class="img-fluid" src="images/second.webp" alt="">
				</a>
			</div>
			<div class="col-sm-4 col-4 col-md-4 margin">
				<h1 class="second"><a href="#" class="txt_color">Bags + Clutches</a></h1>
				<p class="detail">
					Whether you're looking for a luxurious
					leather tote, a retro-inspired backpack, or
					 a simple zip-pouch, you've come to the
					 right place.
				</p>
				<a href="#" class="txt-color shop-now">SHOP NOW 
					<img class="img-fluid" src="images/capture.png" alt="">
				</a>
			</div>
		</div>

		<div class="row justify-content-between">
			<div class="col-sm-4 col-4 col-md-4 margin">
				<h1 class="second"><a href="#" class="txt_color">Clothing</a></h1>
				<p class="detail">
					We've waded through hundreds of brands
					 to bring you garments that are
					  timeless, eye-catching, and above all,
					  made to last.
				</p>
				<a href="#" class="txt-color shop-now">SHOP NOW 
					<img class="img-fluid" src="images/capture.png" alt="">
				</a>
			</div>
			<div class="col-sm-6 col-6 col-md-6 pt-5">
				<a href="#">
					<img class="img-fluid pt-5" src="images/third.jpg" alt="">
				</a>
			</div>
		</div>

		<div class="row pt-5">
			<div class="col-sm-6 col-6 col-md-6 pt-5">
				<a href="#">
					<img class="img-fluid" src="images/fourth.jpg" alt="">
				</a>
			</div>
			<div class="col-sm-4 col-4 col-md-4 margin">
				<h1 class="second"><a href="#" class="txt_color">Jewelry</a></h1>
				<p class="detail">
					Find that necklace you can throw on with
					any outfit, earrings that stand out in just
					the right way, or a ring that's more like art
					than jewelry.
				</p>
				<a href="#" class="txt-color shop-now">SHOP NOW
					<img class="img-fluid" src="images/capture.png" alt="">
				</a>
			</div>
		</div>
		<hr>
		<div class="row">
			<div class="col-sm-2 col-2 col-md-2 small">
				<a href="#">
					<img class="img-fluid" src="images/s1.jpg" alt="">
					<img class="img-fluid" src="images/s2.webp" alt="">
					<img class="img-fluid" src="images/s3.jpg" alt="">
					<img class="img-fluid" src="images/s4.jpg" alt="">
					<img class="img-fluid" src="images/s5.jpg" alt="">
				</a>
			</div>
			<div class="col-sm-2 col-6 col-md-6 ">
				<a href="#">
					<img class="img-fluid" src="images/sweater.jpg" alt="">
				</a>
			</div>
			<div class="col-sm-4 col-4 col-md-4">
				<h1 class="sweater"><a href="#" class="txt_color">Andean Sweater</a></h1>
				<p>$260.00 USD</p>
				<p class="detail">
					A beautifully classic chunky knit, crew neck
					sweater. Handmade right here in Portland, Oregon
					with 100% alpaca wool to keep you extra warm
					during those long PNW winters.
				</p>
			</div>
		</div>
	</div>
</body>
</html>
如何获得理想的结果？我是新手，并不了解很多。
html css bootstrap-4 viewport
1个回答
0
投票
首先：

  1. 不要使用重要的。请，如果您要覆盖的代码不包含important!，请不要使用它。

  2. 如果要为平板电脑或移动设备构建网站，请使用断点为要更改的元素添加某种样式。

示例：

@@media (min-width: 320px) { .title > a, .second > a { font-size: 15px ; } }
如果您还有其他问题，请询问，我会尽力帮助您。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.