代码之家 › 专栏 › 技术社区 › JMF

将容器上方的颜色列拉伸到屏幕引导的底部

liferay-theme twitter-bootstrap-3 css twitter-bootstrap

JMF · 技术社区 · 10 年前

我需要通过 background 直到屏幕结束。我可以用引导程序做什么?我现在正在做一个 width 但我的卷轴出现了。

我附上了一张照片

<div class="portlet-layout row-fluid">
         <div class="container">
             <div class="col-sm-9">
                <div class="row-fluid portlet-column" id="column-2">
                    $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
                </div>
            </div>
             <div class="col-sm-3 no-float">
                <div class="portlet-column portlet-column" id="columnaColor-3">
                    $processor.processColumn("columnaColor-3", "portlet-column-content portlet-column-content")
                </div>
                 <div class="portlet-column portlet-column-last" id="column-4">
                    $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
                </div>
             </div>
         </div>
    </div>

#columnaColor-3{
    background: #2e373c;
}

1 回复 | 直到 10 年前

Alvaro Silvino 10 年前

这个 .col-* 和 .container 制造商: padding-right: 15px; padding-left: 15px; 我刚刚添加了一条规则 column 您希望通过以下方式删除此项: margin-right:-30px

ps:我换了 sm 到 xs 这样你可以更清楚地看到小屏幕上的变化。

更新

如果您正在放置一个长(连续)文本日志;您可以使用以下方法打断文本:

div{
    word-break: break-all;
}

#columnaColor-3{
    background: #2e373c;
    color:red;    margin-right:-30px
}
div{
    word-break: break-all;
}
.container{
    background: green;
}
#column-4{
    background: blue;
    margin-right:-30px

}
#column-2{
    background: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="portlet-layout row-fluid">
         <div class="container">
             <div class="col-xs-9">
                <div class="row-fluid portlet-column" id="column-2">
                                        $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")

                </div>
            </div>
             <div class="col-xs-3 no-float">
                <div class="portlet-column portlet-column" id="columnaColor-3">
                    $processor.processColumn("columnaColor-3", "portlet-column-content portlet-column-content")
                </div>
                 <div class="portlet-column portlet-column-last" id="column-4">
                    $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
                </div>
             </div>
         </div>
    </div>