html - 将图像粘贴到响应式 Bootstrap

Question

我正在尝试创建这个:

我有左右图像和猴子图像。我试图创建一行并在中间制作左图像 col-3，右图像 col-3 和猴子和文本 col-6。一切都相互堆叠，从屏幕上出来并且不起作用。我怎样才能做出这种东西？

    <section class="hero-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-xs-3">
                <img src="images/hero-left.svg" class="" alt="">
            </div>
            <div class="col-xs-6 col-md-126>
                <h1 class="">
                    <b>monKey</b> Generator</h1>
                <br>
                <h2 class="">Generate a
                    <b>unique monkey</b> avatar
                    <br> from a
                    <b>Banano public key</b>
                </h2>
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
                    class="" alt="">
            </div>
            <div class="col-md-3 col-sm-3">
                <img src="images/hero-right.svg" class="" alt="">
            </div>
        </div>
    </div>
</section>

Answer 1

上面的代码片段中有几个拼写错误，例如:col-md-126 并且之后缺少 "。此外，bootstrap 4 在 cols 上没有 xs，因此使用只需 col-3 col-6 col-3 就可以完成这项工作。请参阅下面的代码段。

img {
width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <img src="images/hero-left.svg" alt="monkey left">
            </div>
            <div class="col-6">
                <h1>
                    <b>monKey</b> Generator
                </h1>
                <br>
                <h2>Generate a
                    <b>unique monkey</b> avatar
                    <br> from a
                    <b>Banano public key</b>
                </h2>
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
            </div>
            <div class="col-3">
                <img src="images/hero-right.svg" class="" alt="monkey right">
            </div>
        </div>
    </div>
</section>