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，此后缺少"。另外，引导程序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>

将图像粘贴到侧面响应式引导程序

1 个答案: