1

Bootstrap 3.0 でジャンボトロンを作成しようとしています。最初の 3 列を画像で占め、残りの 9 列をテキストで占めたいと考えています。ただし、コードを入力すると、画像とテキストが交差します。

ここに私のコードがあります：

<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

画像にimg-responsiveクラスが含まれていることを確認して、列に応じてスケーリングされるようにします。また、画像に3列、テキストに9列を使用する場合（説明したように） 、代わりに適切なcol-md-3andを使用しますcol-md-9col-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

于 2013-10-08T22:06:47.107 に答える