个人中心
gpt4 book ai didi

html - Css Bootstrap 间距问题

转载 作者：行者123 更新时间：2023-11-28 04:52:00 29 4
gpt4 key购买 nike

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

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

enter image description here

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>

最佳答案 

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

关于html - Css Bootstrap 间距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40645167/

29 4 0
文章推荐： javascript - 更改事件在 Bootstrap 多重选择字段中不起作用
文章推荐： javascript - 需要仅提取 JSON 模式中存在的键
文章推荐： javascript - ES6 Map 中的 Array.map 相当于什么？
文章推荐： javascript - 如何动态更新文本框id？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com