Question

我正在尝试在Bootstrap 3.0中创建一个Jumbotron。我希望我的图像占据前三列和我的文本占据其他九列。但是，当我输入代码时，图像和文本相互交叉。

HEre是我的代码：

<div class="jumbotron">
        <h1 class="col-lg-offset-3">Content Strategist and Designer</h1>

    <div class="row col-md-12">
        <div class="col-md-5 col-md-offset-1">
            <img src="img/cover.png">
            </div>

        <div class="col-md-5 col-md-offset-1">
            <p>Hello,</p>
                <p> My name is Bryan Collins and I am a student of the Digital Skills Academeny WebElevate 2.1 programme, where I specialised in the creation of online content.</p>
                <p>Throughout my professional career, I have written and produced various types of multimedia for a variety of Irish online and offline publications.</p>
                <p><a href="#" class="btn btn-primary btn-large">Learn More</a></p>
            </div>
        </div>
</div>

Answer 1

确保您的图片包含img-responsive类，以便相应地对列进行缩放。此外，如果您想为图像使用3个cols，并为文本使用9个cols（如您所述），请使用相应的col-md-3和col-md-9代替col-md-5

<div class="jumbotron">
    <h1 class="col-lg-offset-3">Content Strategist and Designer</h1>

    <div class="row">
        <div class="col-md-3">
            <img src="//placehold.it/800x950" class="img-responsive">
            </div>

        <div class="col-md-9">
            <p>Hello,</p>
                <p> My name is Bryan Collins and I am a student of the Digital Skills Academeny WebElevate 2.1 programme, where I specialised in the creation of online content.</p>
                <p>Throughout my professional career, I have written and produced various types of multimedia for a variety of Irish online and offline publications.</p>
                <p><a href="#" class="btn btn-primary btn-large">Learn More</a></p>
            </div>
        </div>
</div>

演示：http://bootply.com/86474

在Jumbotron遇到麻烦

1 个答案: