javascript - 如何使最后一列全 Angular

Question

我在通用 Bootstrap 3 .container 中有以下部分，其中包含 .col-md-8 和 .col-md-4 (不是液体)。 我需要右栏以其背景到达显示器的边缘。我该如何解决我的问题？谢谢。

<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--hero 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 -->