如何使最后一列全角

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