<分区>
html - 使用 Bootstrap 时如何删除行之间的空白？
标签 html css bootstrap-4
我正在使用 bootstrap 创建产品页面，只是想知道如何删除两行之间的空白区域？我已经突出显示了导致问题的空间，页面本身还没有完成，但我预见到这是一个我会再次遇到的问题，我想现在就处理它，并在遇到它时能够得到更好的练习之后。
<body>
<div class="container">
<div class="row justify-content-center" id="header" style="margin-bottom: 0px">
<div class="col-md-3">
<img src="fakelogo.png" alt="Placeholder logo for Golden Shoe" width="100%" height="40%">
</div>
<div class="col-md-6">
<nav class="nav justify-content-center">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Products</a>
<a class="nav-link" href="#">My Account</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
<div class="col-md-3">
<img src="shoppingcart.png" alt="Shopping cart icon" width="10%" height="10%">
<p>Your Shopping Cart</p>
<p>Shoes : 0 Cost: 0 </p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<p>Search By</p>
<form action="">
<div class="form-group">
<label for="keywords">Keywords: </label>
<input type="text" class="form-control" id="keywords">
</div>
<div class="form-group">
<label for="category">Categorys</label>
<select class="form-control" id="category">
<option> -- Select Category --</option>
<option>Men's Sports</option>
<option>Men's Evening Wear</option>
<option>Mens's Casual</option>
<option>Men's Slippers</option>
<option>Men's Sandles</option>
<option>Woman's Sports</option>
<option>Woman's Evening Wear</option>
<option>Woman's Casual</option>
<option>Woman's Slippers</option>
<option>Woman's Sandles</option>
<option>Woman's Highheels</option>
<option>Womans's Pumps</option>
<option>All</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Categories</p>
<ul>
<li>Men's Sports</li>
<li>Men's Evening Wear</li>
<li>Men's Casual</li>
<li>Men's Slippers</li>
<li>Men's Sandles</li>
<li>Woman's Sports</li>
<li>Woman's Evening Wear</li>
<li>Woman's Casual</li>
<li>Woman's Slippers</li>
<li>Woman's Sandles</li>
<li>Woman's Highheels</li>
<li>Woman's Pumps</li>
<li>All</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-sm-6">
<img id="displayImage" src="DisplayShoe/1.png" alt="Primary shoe display image" style="width: 100%;height: 80%;">
</div>
最佳答案
问题是您将图像的宽度设置为 100%，将图像的高度设置为 40%。
<div class="col-md-3">
<img src="fakelogo.png" alt="Placeholder logo for Golden Shoe" width="100%" height="40%">
</div>
为避免这种情况，请将 max-height 和 max-width(px) 与 Bootstrap responsive images 一起使用.
关于html - 使用 Bootstrap 时如何删除行之间的空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59073300/