Html 如何使用引导调整Joomla中背景图像和文本的大小

我目前正在使用Twitter引导在Joomla 3.6.5中构建一个新站点。我的站点目前在本地主机上，我已经附加了一个我当前拥有的映像，但我现在正试图添加引导代码以使其具有响应性，我正在努力处理该部分（下图所示）

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

如果您能就如何解决平板电脑屏幕尺寸问题提供建议，我也将不胜感激，因为理想情况下，我们希望这三个屏幕并排或相互重叠，但我猜平板电脑屏幕尺寸上会有很大的空间

我当前的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>

---

非常感谢您的帮助。

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

首先，您应该使用col xx网格样式

看看这个 使用此栅格样式可以解决视口的问题

---

对于#main box中的bg图像，尝试使用

对象匹配：cover
有没有可能，“Twitter引导”是Joomla主题？Twitter引导不是主题，我集成了Twitter引导文件以使网站响应。好吧，您集成的Twitter引导文件是真实Twitter引导的重构版本，所有类都已重命名。你会发现很多人知道推特引导，但不是很多人知道。。。不管你是什么。是否有一个重构映射图，可以看到每个类映射到什么？从外面看，Joomla的人真的觉得有必要重新发明轮子。如果他们按原样集成Twitter引导，很多人都可以帮助你。您可以从Twitter引导的大量文档和示例中获益。通过重构和重命名类，只有熟悉这种重构的人才能提供帮助。这对他们的用户来说并不完全有利。我想如果他们收取“帮助”的费用，对他们是有益的。
#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;
}