将容器上方的颜色列拉伸到屏幕底部 bootstrap
Stretching color column above the container to the bottom of the screen bootstrap
我需要将容器上方的列的 background
传递到屏幕末尾。正如我可以用 bootstrap 做的那样并且反应灵敏?我现在正在使用 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;
}
.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>
我需要将容器上方的列的 background
传递到屏幕末尾。正如我可以用 bootstrap 做的那样并且反应灵敏?我现在正在使用 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;
}
.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>