如何使最后一列全宽

Question

我在通用Bootstrap 3 .col-md-8中有.col-md-4和.container的以下部分（不是流畅的）。 我需要右列以其背景到达显示器的边缘。我怎样才能解决我的问题？感谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section class="home--hero">
    <div class="container">
        <div class="row">
            <div class="content">
                <div class="col-md-8 col-xs-12 npl">
                    <div class="hero--wrapper">
                        <h1>Title</h1>
                        <ul class="banner-list banner-list-black">
                            <li><span>Lorem</span></li>
                            <li><span>Ipsum</span></li>
                            <li><span>Dolor</span></li>
                        </ul>    
                    </div>
                </div>
                <div class="col-md-4">
                      Lorem Ipsum
                    </div>
            </div><!-- content -->
        </div><!-- row -->
    </div><!-- container -->
</section><!-- home hero section -->

Answer 1

试试这个， 删除col-md-4类，使其为position:absolute和right:0

制作 .home - 英雄 position:relative

.home--hero{
position:relative;
}

.right-side{
position:absolute;
background:red;
right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section class="home--hero">
    <div class="container">
        <div class="row">
            
                <div class="col-md-8 col-xs-12 npl">
                    <div class="hero--wrapper">
                        <h1>Title</h1>
                        <ul class="banner-list banner-list-black">
                            <li><span>Lorem</span></li>
                            <li><span>Ipsum</span></li>
                            <li><span>Dolor</span></li>
                        </ul>    
                    </div>
                </div>
                <div class="right-side">
                      Lorem Ipsum
                    </div>

        </div><!-- row -->
    </div><!-- container -->
</section><!-- home hero section -->