Question

我在我的两列（其中有三列）的右侧添加了一个垂直列，现在列图像的大小不同，当浏览器窗口调整大小时，它们否甚至更长时间显示在同一行！

谁能告诉我为什么？

直播链接：http://185.123.96.102/~kidsdrum/moneynest.co.uk/

谢谢，

萨姆

HTML

<div class="container-fluid bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
  <div class="row">
    <div class="col-sm-4">
         <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-1.png" alt="button-1">
            <div class="rightborder">
           <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
      </div>
         </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-2.png" alt="button-1">
        <div class="rightborder">
      <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-3.png" alt="button-1">
      <p class="alltextbig text-uppercase"><b>Going</b> travelling?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
  </div>
</div>

CSS

.rightborder {
padding-right:30px;
border-right: 1px solid #ccc;
}

Answer 1

试试此解决方案。我认为它比之前的两个答案更清晰。

<强> HTML

<div class="container-fluid bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
  <div class="row">
    <div class="col-sm-4">
         <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-1.png" alt="button-1">
            <div class="box-content">
           <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
      <img src="https://unsplash.it/600?random" class="img-responsive" style="width:100%" alt="Image">
      </div>
         </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-2.png" alt="button-1">
        <div class="box-content column-border">
      <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
      <img src="https://unsplash.it/600?random" class="img-responsive" style="width:100%" alt="Image">
    </div>
    </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-3.png" alt="button-1">
       <div class="box-content">
      <p class="alltextbig text-uppercase"><b>Going</b> travelling?</p>
      <img src="https://unsplash.it/600?random" class="img-responsive" style="width:100%" alt="Image">   
       </div>
    </div>
  </div>
</div>

<强> CSS

.box-content.column-border{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

希望我能挽救你的生命：）

Answer 2

您可以尝试添加

<div class="container-fluid bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
  <div class="row">
    <div class="col-sm-4">
         <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-1.png" alt="button-1">
           <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
         </div>
    <div class="col-sm-4 columnBorder"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-2.png" alt="button-1">
      <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-3.png" alt="button-1">
      <p class="alltextbig text-uppercase"><b>Going</b> travelling?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
  </div>
</div>

使用以下CSS：

columnBorder {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

Answer 3

我猜你正在寻找这样的东西：

<div class="container-fluid bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
  <div class="row">
    <div class="col-sm-4">
         <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-1.png" alt="button-1">
            <div>
           <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
      </div>
         </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-2.png" alt="button-1">

 <!-- You can adjust the position of this Div -->
 <div class="columnBorder"> 
      <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
 </div>
 <!-- End of the Adjustable Div -->

    </div>
    <div class="col-sm-4"> 
       <img src="http://185.123.96.102/~kidsdrum/moneynest.co.uk/img/button-3.png" alt="button-1">

      <p class="alltextbig text-uppercase"><b>Going</b> travelling?</p>
      <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    </div>
  </div>
</div>

您只需将设置边框的类左侧和右侧放置到中间元素即可。并且，如果您希望数字超出边界，请仅在包含div元素的类上应用该类。

columnBorder {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

您可以通过设置div的内部内容来调整您的需求。即：

 <!-- You can adjust the position of this Div -->
 <div class="columnBorder"> 
      <p class="alltextbig text-uppercase"><b>Saving</b> to buy a home?</p>
 </div>
 <img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
 <!-- End of the Adjustable Div -->

添加垂直边框后，Bootstrap列不均匀

3 个答案: