html - 如何使用 Bootstrap 在 Joomla 中调整背景图像和文本的大小

Question

我目前正在使用 Twitter Bootstrap 在 Joomla 3.6.5 中构建一个新站点。我的网站目前在我的本地主机上，我附上了我目前拥有的图像，但我现在正在尝试添加 Bootstrap 代码以使其响应，我正在努力处理该部分(如下图所示)

我想做的是将它堆叠在每个移动版本的顶部，但背景图像(也附加)需要随着屏幕变小而调整大小。

如果有任何关于如何解决平板电脑屏幕尺寸问题的建议，我也将不胜感激，因为理想情况下，我希望这三者并排显示或彼此重叠显示，但我猜平板电脑屏幕尺寸上会有很多空间.

我当前的 html 如下:

<div id="mainbox" class="span12">
<div class="box1 span4">
<div class="boxes-img1"><img src="images/pic1.png" alt="" border="0" /></div>
<div class="boxes1">20 MINUTES REPAIRS</div>
<div class="boxestext1">We have a 20 Minute Repairs Service and all Minor Repairs are diagnosed while you wait. Upgrades are also provided and completed within 20 minutes!</div>
<div class="boxes-link1">READ MORE</div>
</div>
<div class="box2 span4">
<div class="boxes-img2"><img src="images/pic2.png" alt="" border="0" /></div>
<div class="boxes2">WALK-IN REPAIRS</div>
<div class="boxestext2">We have a Walk-In Repairs Service and all faults are diagnosed while you wait. Please bear in mind all Major Faults can take up 24/48 hours.</div>
<div class="boxes-link2">
<div class="boxes-linktxt2">READ MORE</div>
</div>
</div>
<div class="box3 span4">
<div class="boxes-img3"><img src="images/pic3.png" alt="" border="0" /></div>
<div class="boxes3">BUY MOBILE PHONES</div>
<div class="boxestext3">All the latest models and great deals on Mobile Phones available, so visit our store today!</div>
<div class="boxes-link3">
<div class="boxes-linktxt3">READ MORE</div>
</div>
</div>
</div>

CSS:

#mainbox {
    float: left;
    position: relative;
    background: url(../images/box.png) no-repeat;
    height: 249px;
    width: 100%;
    }

div.box1{
  position: relative;
}

div.boxes1 {
  position:absolute;
    top:65px;
    left:0;
    margin: 0 0 29px 39px;
    text-decoration:none;
    font-size: 24px;
    font-family: 'Cabin-Bold'; /* no .ttf */
  font-style:italic;
    color:#fff;
  width: 268px;
    }

div.boxestext1 {
  position:absolute;
    top:115px;
    left:0;
    margin: 0 0 0 39px;
    text-decoration:none;
    font-size: 13px;
    font-family: 'Open-Sans'; /* no .ttf */
    color:#7A869B;
    width: 268px;
    }

div.boxes-img1 {
  position:absolute;
    top:-40px;
    left:0;
    margin: 0 0 14px 125px;
  width: 268px;
    }

 div.boxes-link1 {
  display:block;
  background: url(../images/readmore.png) no-repeat;
  margin: 0 0 14px 125px;
  position:absolute;
    top:221px;
    left:0;
  height: 37px;
  width: 84px;
  color:#FFF;
  text-decoration:none;
    font-size: 12px;
    font-family: 'Cabin'; /* no .ttf */
  padding: 10px 0 0 9px;
}

.boxes-link1:visited, .boxes-link1:hover, .boxes-link1:active {
  display:block;
  background: url(../images/readmoreover.png) no-repeat;
  margin: 0 0 14px 125px;
  position:absolute;
    top:221px;
    left:0;
  height: 37px;
  width: 84px;
  color:#fc1300;
  text-decoration:none;
    font-size: 12px;
    font-family: 'Cabin'; /* no .ttf */
  padding: 10px 0 0 9px;
}

div.box2{
  position: relative;
}

div.boxes2 {
  position:absolute;
    top:65px;
    left: 310px;
    margin: 0 0 29px 39px;
    text-decoration:none;
    font-size: 24px;
    font-family: 'Cabin-Bold'; /* no .ttf */
  font-style:italic;
    color:#fff;
  width: 268px;
    }

div.boxestext2 {
  position:absolute;
    top:115px;
    left: 310px;
    margin: 0 0 0 39px;
    text-decoration:none;
    font-size: 13px;
    font-family: 'Open-Sans'; /* no .ttf */
    color:#7A869B;
    width: 268px;
    }

div.boxes-img2 {
  position:absolute;
    top:-40px;
    left: 310px;
    margin: 0 0 14px 125px;
  width: 268px;
    }

div.boxes-link2 {
  position:absolute;
    top:221px;
    left:310px;
    margin: 0 0 14px 125px;
  height: 37px;
  width: 268px;
  background: url(../images/readmore.png) no-repeat;
}

div.boxes-linktxt2 {
  margin: 10px 0 0 9px;
  text-decoration:none;
    font-size: 12px;
    font-family: 'Cabin'; /* no .ttf */
  color:#FFF;
}
/* 2 BOXES END */

div.box3{
  position: relative;
}

div.boxes3 {
  position:absolute;
    top:65px;
    right:0;
    margin: 0 39px 29px 0;
    text-decoration:none;
    font-size: 24px;
    font-family: 'Cabin-Bold'; /* no .ttf */
  font-style:italic;
    color:#fff;
  width: 268px;
    }

div.boxestext3 {
  position:absolute;
    top:115px;
    right:0;
    margin: 0 39px 0 0;
    text-decoration:none;
    font-size: 13px;
    font-family: 'Open-Sans'; /* no .ttf */
    color:#7A869B;
    width: 268px;
    }

div.boxes-img3 {
  position:absolute;
    top:-40px;
    right:0;
    margin: 0 -50px 14px 0;
  width: 268px;
    }

div.boxes-link3 {
  position:absolute;
    top:221px;
    right:0;
    margin: 0 -50px 14px 0;
  height: 37px;
  width: 268px;
  background: url(../images/readmore.png) no-repeat;
}

div.boxes-linktxt3 {
  margin: 10px 0 0 9px;
  text-decoration:none;
    font-size: 12px;
    font-family: 'Cabin'; /* no .ttf */
  color:#FFF;
}

非常感谢任何帮助。

Answer 1

我认为上述做法是完全错误的。

首先你应该使用 col-xx-xx 网格样式

看看这个Bootstrap Grid Options使用这种网格样式可以解决您的视口(viewport)问题

至于#mainbox 中的背景图像尝试使用object-fit:cover;