1

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

这是我的代码：

<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>
4

1 回答 1

6

Make sure your image contains the img-responsive class so that it scales accordingly for the column. Also, if you want to use 3 cols for the image, and 9 cols for the text (as you've described) use the appropriate col-md-3 and col-md-9 instead of 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>

Demo: http://bootply.com/86474

于 2013-10-08T22:06:47.107 回答