在Jumbotron遇到麻烦

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