Css Bootstrap 间距问题

Question

我正在使用 bootstrap 并且我创建了一个包含 3 列的行。我在列中有图片，我希望其中一张跨越 2 列的宽度。我最初的想法是让 width: 200%;然而，这并没有考虑 css 列之间的差距，因此它不能很好地缩放。

我的第二个问题是垂直图像之间的间隙与列间隙的大小不同。

HTML 文件：桑德尔

    <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>

Answer 1

<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 -->

Answer 2

带有片段的可运行代码

<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>

Css Bootstrap 间距问题

Css Bootstrap spacing issue

html

css

styling