Question

我试图让一个bootstrap列跨越2行。我一直在关注How can I get a Bootstrap column to span multiple rows?，它似乎不适用于我的项目。

有人可以告诉我我需要做什么才能使右边的列成为2行吗？

<div class="container" style="background-color: #fff">
    <div class="row" style="background-color: #fff">
    <div class="col-md-4">
        <img src="public/img/index/Hola_Sevila.png" style="width:180px">
      <h6>Hola Sevilla!</h6>
      <p>I recently had the pleaseure and the privilege of travelling to the ...</p>
        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-md-4">
        <img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
        <h6>Translation helps children</h6>
      <p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises ...</p>
        <p><a href="#">Read More</a></p>
   </div>
    <div class="col-md-4 two_row_column">
        <div class="index-b-right-1"></div>
        <div class="index-b-right-1">
            <h3>Videos</h3>
        </div>
        <div class="index-b-right-1">
            <h3>Be a Friend</h3>
        </div>
        <div class="index-b-right-2">
            <h4>You can show your appreciation and support future development              by becoming a friend of the Rosetta</h4>
        </div>
        <div class="index-b-right-3">
            <h3><a href="#">Donate</a></h3>
        </div>
        <div class="index-b-right-1"></div>

    </div>
  </div>

CSS

.index-b-right-1 {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding-bottom: 10px;
}

.index-b-right-2 {
background-color: #000;
border-bottom: 2px solid white;
color: #fff;
text-align: center;
padding: 30px 40px 30px 40px;
}

.index-b-right-3  {
background-color: #000;
height: 40px;
border-bottom: 2px solid white;
text-align: center;
padding-bottom: 10px;
}

.index-b-right-3 a {
color: #CC9900;
}

Answer 1

我想这就是你想做的事情？我将解释它的简单方法是创建最顶行，在行中创建列，然后在另一列中创建另一行，然后将其划分为单独的列。

希望它有所帮助！

<div class="container" style="background-color: #fff">
<div class="row" style="background-color: #fff">
    <div class="col-md-4">
        <img src="public/img/index/Hola_Sevila.png" style="width:180px">
        <h6>Hola Sevilla!</h6>

        <p>I recently had the pleaseure and the privilege of travelling to the ...</p>

        <p><a href="#">Read More</a></p>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4">
                <img src="public/img/index/Trans_helps_children.jpg" style="width:180px">
                <h6>Translation helps children</h6>

                <p>De La Salle Solidarieta Internatazionale ONLUS is a non-profit organisation that fundraises
                    ...</p>

                <p><a href="#">Read More</a></p>
            </div>
            <div class="col-md-4 two_row_column">
                <div class="index-b-right-1"></div>
                <div class="index-b-right-1">
                    <h3>Videos</h3>
                </div>
                <div class="index-b-right-1">
                    <h3>Be a Friend</h3>
                </div>
                <div class="index-b-right-2">
                    <h4>You can show your appreciation and support future development by becoming a friend of the
                        Rosetta</h4>
                </div>
                <div class="index-b-right-3">
                    <h3><a href="#">Donate</a></h3>
                </div>
                <div class="index-b-right-1"></div>

            </div>
        </div>
    </div>
</div>

Bootstrap列跨越2行

1 个答案: