Question

参考上述帖子：

Bootstrap left align text inside centered div

我想要更多修改...我想为每个块提供一个背景颜色条带。目前只有内容才会出现。当屏幕调整大小时，它应该按原样扩展。

以下是代码HTML代码：

<div class="row">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
    <table border="0" align="center" class="yellow col-sm-12">
        <tbody><tr>
        <td align="left"><strong>S.B.Road – Head Office</strong></td>
        </tr>
        <tr>
        <td align="left">The Mesh, B29, Nilgiri Heights, Behind ICC Trade Tower, Senapati Bapat Road, Pune-411016.</td>
        </tr>
        <tr>
        <td align="left">(Mobile): +91 99232 11122</td>
        </tr>
        <tr>
        <td align="left">(Email): <a href="mailto:deepti@themesh.co.in">deepti@themesh.co.in</a></td>
        </tr>
        </tbody></table>
</div><!--conaddress end-->
</row>

<div class="row">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
    <table border="0" align="center" class="green">
        <tbody><tr>
        <td align="left"><strong>Baner</strong></td>
        </tr>
        <tr>
        <td align="left">The Capital, B-301, Sr. No. 5/1A, Next to Nano Space IT Park & Rolling Hills, Baner-Pashan Link Road, Pune - 411021</td>
        </tr>
        <tr>
        <td align="left">(Mobile): +91 99232 11122</td>
        </tr>
        <tr>
        <td align="left">(Email): <a href="mailto:deepti@themesh.co.in">deepti@themesh.co.in</a></td>
        </tr>
        </tbody></table>
</div><!--conaddress end-->
</row>

以下是我的CSS代码

.yellow {
    padding-bottom: 10px;
    background-color: #FFB700;
}
.green{   padding-bottom: 10px; background-color:#99FFCC;}

当前输出：http://wizdumb.in/current.jpg 预期输出：http://wizdumb.in/expeceted-result.jpg

Answer 1

它取决于您将“.yellow”和“.green”样式放在哪个元素上。
问题也可能出在容器类中。 ".container" and ".container-fluid"类之间存在差异。

我是按照以下方式执行的：https://jsfiddle.net/6ur3n9vu/1/

 <section class="yellow">
    <div class="row">
        <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
        <table border="0" align="center" class="yellow col-sm-12">
        <tbody><tr>
        <td align="left"><strong>S.B.Road – Head Office</strong></td>
        </tr>
        <tr>
        <td align="left">The Mesh, B29, Nilgiri Heights, Behind ICC Trade Tower, Senapati Bapat Road, Pune-411016.</td>
    </tr>
        <tr>
        <td align="left">(Mobile): +91 99232 11122</td>
        </tr>
        <tr>
        <td align="left">(Email): <a href="mailto:deepti@themesh.co.in">deepti@themesh.co.in</a></td>
        </tr>
        </tbody></table>
       </div>
    </div>
</section>

<section class="green">
    <div class="row">
        <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
        <table border="0" align="center" class="green">
        <tbody><tr>
        <td align="left"><strong>Baner</strong></td>
        </tr>
        <tr>
        <td align="left">The Capital, B-301, Sr. No. 5/1A, Next to Nano Space IT Park & Rolling Hills, Baner-Pashan Link Road, Pune - 411021</td>
        </tr>
        <tr>
        <td align="left">(Mobile): +91 99232 11122</td>
        </tr>
        <tr>
        <td align="left">(Email): <a href="mailto:deepti@themesh.co.in">deepti@themesh.co.in</a></td>
        </tr>
        </tbody></table>
        </div>
    </div>
</section>

Bootstrap左对齐文本在居中的div拉伸背景颜色

1 个答案: