Question

我正在使用bootstrap，我创建了一个包含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>

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

带有代码段的可运行代码

--------------------------------------------------------------------------------
module Parser (main) where
--------------------------------------------------------------------------------
-- modules
import Text.ParserCombinators.ReadP as ReadP
import Data.Char as D
import Control.Applicative
--------------------------------------------------------------------------------

-- this parses one o
oParser :: ReadP Char
oParser = satisfy (== 'o')

-- this parses one a
aParser :: ReadP Char
aParser = satisfy (== 'a') --(\v -> v == 'a')

-- this parses one plus
pParser :: ReadP Char
pParser = satisfy (== '+')

spaceParser :: ReadP Char
spaceParser = satisfy D.isSpace    

parseExpr :: ReadP String
parseExpr = -- ReadP.choice [oParser, spaceParser]

main :: IO ()
main = print [ x | (x, "") <- ReadP.readP_to_S parseExpr  "o +a o+a+a o o"]

Css Bootstrap间距问题

2 个答案: