html - 容器内的列的全宽背景 [Bootstrap 3]
问题描述
基本上我在一个容器中有两列,我正在尝试将背景颜色添加到在容器外扩展全宽的列中。这是模型。
如您所见,黄色背景内的内容位于列内的列内。如何设置背景颜色,使其向左全宽并适用于所有屏幕?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Project Name
</h2>
</div>
</div>
</div>
</section>
<section class="spage-intro">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3 class="intro-excerpt">
Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.
</h3>
</div>
<div class="col-sm-8">
<div class="the-content-wrapper">
Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.Vestibulum eu metus at tortor molestie dapibus. Nullam viverra est id metus facilisis, id finibus dolor finibus. Aenean id mi eu risus condimentum ullamcorper.
</div>
</div>
</div>
</div>
</section>
解决方案
添加CSS:
.intro-excerpt{
background-color: #f6cc08;
}
推荐阅读
- c++ - 可变参数模板参数的问题
- javascript - 大表的Angular 6性能问题
- sql - 如何摆脱由于 PLSQL linesize 大于每行中的数据而导致的空格?
- c# - 在不同视图中使用下拉列表中的文本值
- node.js - nodejs s3存储桶上传脚本可重用
- ruby-on-rails - Rails 记录神秘冻结,默默丢弃更新
- c# - 更新关系为映射表的子集合的 EF 友好方式
- php - 如何在 Laravel 中实现自定义频道通知
- mariadb - 在联机服务器上工作时如何使用外键
- chapel - 如何将 Chapel 字符串传递给需要(非常量)char* 的 C 函数?