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

时间:2015-08-24 06:08:05

标签: twitter-bootstrap

参考上述帖子:

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

1 个答案:

答案 0 :(得分:0)

  1. 它取决于您将“.yellow”和“.green”样式放在哪个元素上。
  2. 问题也可能出在容器类中。 ".container" and ".container-fluid"类之间存在差异。
  3. 我是按照以下方式执行的: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>