CSS Bootstrap間距問題
[英]Css Bootstrap spacing issue
問題描述
我正在使用引導程序，並創建了一個包含3列的行。 我在列中有圖片，我希望其中之一可以跨越2列的寬度。 我最初的想法是將寬度設為200％； 但是，這沒有考慮css列之間的間隔，因此無法很好地擴展。
我的第二個問題是垂直圖像之間的間隙與列間隙的大小不同。
HTML檔案：Sonder
<meta name="Sonder" content="Great Donegal Food">
<!-- CSS/BootStrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre" rel="stylesheet">
</head>
<body>
<div class="container-fluid"> <!-- Allows full width to be occupied -->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: white;">
<div class="row">
<div class="col-md-12"> <!-- nav bar 12 column -->
<ul class="topnav">
<a href="#home"><img src="logo.jpg" alt="Sonder"></a>
<a href="http://localhost:8888"><li>Menu</li></a>
<a href="#about"><li>About Us</li></a>
<a href="contact.html"><li>Contact Us</li></a>
</ul>
</nav></div>
<!-- col 1 start -->
<div class="col-md-4">
<br><br><br><br><br><br>
<img class="img_hover1" src="choc.jpg" alt="Sonder" style="width:100%;"></a>
<img class="img_hover2" src="turkeyflat.jpg" alt="Sonder" style="width:100%; margin-top: 2em;"></a>
<img class="img_hover3" src="stirloin.jpg" alt="Sonder" style="width:100%; margin-top: 2em;"></a>
</div> <!-- col 1 end -->
<!-- col 2 start -->
<div class="col-md-4">
<br><br><br><br><br><br>
<img class="img_hover4" src="scones.jpg" alt="Sonder" style="width:100%;"></a>
<img class="img_hover5" src="roast.jpg" alt="Sonder" style="width:205%; margin-top: 2em;"></a>
</div> <!-- col 2 end-->
<!-- col 3 start-->
<div class="col-md-4">
<br><br><br><br><br><br>
<img class="img_hover6" src="hot_chocolate.jpg" alt="Sonder" style="width:100%;"></a>
<img class="img_hover7" src="egg.jpg" alt="Sonder" style="width:100%; margin-top: 2em;"></a>
</div><!-- col 3 end-->
</div> <!-- end of Row -->
</div><!-- end of container-fluid -->
</body>
2 個解決方案
解決方案1
0 已采納 2017-01-17 11:16:36
<div class="row">
<!-- col 1 start -->
<div class="col-md-4">
<br><br><br><br>
<div class="caption">
<h3>Chocolate Cake</h3>
<p>Gourmet cake made from the finest italian chocolate and freshly prepared daily</p>
</div> <!-- End of caption -->
<img class="img_hover" src="choc.jpg" alt="Sonder" style="width:100%; height: 350px;">
<img class="img_hover" src="turkeyflat.jpg" alt="Sonder" style="width:100%; margin-top: 30px;">
<img class="img_hover" src="stirloin.jpg" alt="Sonder" style="width:100%; margin-top: 30px;">
</div> <!-- col 1 end -->
<!-- col 2 start -->
<div class="col-md-4">
<br><br><br><br>
<img class="img_hover" src="scones.jpg" alt="Sonder" style="width:100%; height: 560px;">
<!-- <img class="img_hover" src="roast.jpg" alt="Sonder" style="width:205%; margin-top: 2em;"> -->
</div> <!-- col 2 end-->
<!-- col 3 start-->
<div class="col-md-4">
<br><br><br><br>
<img class="img_hover" src="hot_chocolate.jpg" alt="Sonder" style="width:100%; height: 265px;">
<img class="img_hover" src="egg.jpg" alt="Sonder" style="width:100%; margin-top: 30px; height: 265px;">
</div><!-- col 3 end-->
這里的解決方案采用嵌套列的形式：
<!-- Leave column 1 empty -->
<div class="col-md-4"></div>
<!-- Add the image into column 2 and make it 8 wide instead of 4 -->
<div class="col-md-8">
<img class="img_hover" src="roast.jpg" alt="Sonder" style="width:100%; margin-top: 30px; ">
</div>
<!-- Add any more pictures here by creating new columns at a width of your choosing -->
</div> <!-- end of Row -->
解決方案2
0 2017-01-17 11:23:47
帶代碼段的可運行代碼
<div class="row"> <div class="col-md-4"> <br><br><br><br> <div class="caption"> <h3>Chocolate Cake</h3> <p>Gourmet cake made from the finest italian chocolate and freshly prepared daily</p> </div> <img class="img_hover" src="choc.jpg" alt="Sonder" style="width:100%; height: 350px;"> <img class="img_hover" src="turkeyflat.jpg" alt="Sonder" style="width:100%; margin-top: 30px;"> <img class="img_hover" src="stirloin.jpg" alt="Sonder" style="width:100%; margin-top: 30px;"> </div> <div class="col-md-4"> <br><br><br><br> <img class="img_hover" src="scones.jpg" alt="Sonder" style="width:100%; height: 560px;"> </div> <div class="col-md-4"> <br><br><br><br> <img class="img_hover" src="hot_chocolate.jpg" alt="Sonder" style="width:100%; height: 265px;"> <img class="img_hover" src="egg.jpg" alt="Sonder" style="width:100%; margin-top: 30px; height: 265px;"> </div> <div class="col-md-4"></div> <div class="col-md-8"> <img class="img_hover" src="roast.jpg" alt="Sonder" style="width:100%; margin-top: 30px; "> </div> </div>
Bootstrap導航欄間距問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.