Bootstrap col全宽，没有容器填充

时间：2016-09-12 08:32:38

标签： html css twitter-bootstrap

我在行中有两列，我希望右列对齐到浏览器的右侧（没有容器填充），左列用左侧容器填充。现在我将右边元素的宽度设置为大约200％，但这不是我想要的邋... ...有什么更好的东西可以让凉爽干净吗？ 我想得到这样的东西：

section {
	background: #000;
	color: #fff;
	height: 1000px;
	padding: 150px 0;
	font-family: Roboto;
}

h1 {
	color: #fff;
	width: 250px;
	font-size: 36px;
	padding: 10px 20px;
	font-weight: 500;
	background-size: 200% 100%;
	background-image: linear-gradient(to right,rgba(255,255,255,0) 50%,#fff 50%);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}

#aboutUs.col-md-7 {
	z-index: 999;
}

#aboutUs p {
	margin-top: 150px;
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 1.2px;
	text-align: justify;
	color: #fff;
	border: 2px solid rgba(255,255,255,.8);
	padding: 20px 30px;
	margin-left: 40px;
	font-weight: 400;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
	z-index: 999;
}

.aboutUsfoto {
	background-image: url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg);
	border-bottom: 5px solid #fff;
	height: 600px;
	background-position: center;
	background-size: 100% 100%;
	overflow: hidden;
	background-size: cover;
	line-height: 600px;
	text-align: center;
	width: 180%;
	margin-left: -140px;
	z-index: -1;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
	opacity: .4;
}
<section id="aboutUs">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1>O nas</h1>
			</div>


			<div class="col-md-7">
				<p class="desc wow bounceInLeft" data-wow-delay=".5s" data-wow-duration=
				"1.2s">Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit</b>, sed
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
				minim veniam, <b>quis nostrud exercitation</b> ullamco laboris nisi ut
				aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
				voluptate velit esse cillum <b>dolore eu fugiat</b> nulla pariatur.
				Excepteur sint occaecat cupidatat non proident, sunt in <b>culpa qui
				officia</b> deserunt mollit anim id est laborum.</p>
				<a class="btn btn-outline pull-right text-center wow bounceInLeft"
				data-wow-delay=".9s" data-wow-duration="1.2s" href="#">Czytaj więcej</a>
			</div>


			<div class="col-md-5">
				<div class="aboutUsfoto wow bounceInRight" data-wow-delay=".2s"
				data-wow-duration="1.2s">
				</div>
			</div>
		</div>
	</div>
</section>

2 个答案:

答案 0 :(得分：1)

在你的css中创建这些类：

.no-pad-y {padding-left: 0;padding-right:0;}
.no-pad-right {padding-right: 0;}
.no-pad-left {padding-left: 0;}

将HTML更改为：

<section id="aboutUs">
    <div class="container no-pad-y">
        <div class="row">
            <div class="col-md-12">
                <h1>O nas</h1>
            </div>
            <div class="col-md-7 no-pad-left">
                <p class="desc wow bounceInLeft" data-wow-delay=".5s" data-wow-duration="1.2s">
                    Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, <b>quis nostrud exercitation</b> ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum <b>dolore eu fugiat</b> nulla pariatur.
                    Excepteur sint occaecat cupidatat non proident, sunt in <b>culpa qui officia</b> deserunt mollit anim id est laborum.
                </p>
                <a href="#" class="btn btn-outline pull-right text-center wow bounceInLeft" data-wow-delay=".9s" data-wow-duration="1.2s">Czytaj więcej</a>
            </div>
            <div class="col-md-5 no-pad-right">
                <div class="aboutUsfoto wow bounceInRight" data-wow-delay=".2s" data-wow-duration="1.2s">
                </div>
            </div>
        </div>
    </div>
</section>

答案 1 :(得分：1)

好的，我找到了解决方案..所以我从右栏删除了col-md-5并添加到.aboutUsfoto一些样式：

.aboutUsfoto {
position:absolute;
right:0;
z-index:1;
width:60vw;
}

这就是我想要的。谢谢你的帮助。

    section {
    	background: #000;
    	color:#fff;
    	height: 1000px;
    	padding: 150px 0;
    	font-family: Roboto;
    }
    h1 {
    		color: #fff;
    		width:250px;
    		font-size: 36px;
    		padding: 10px 20px;
    		font-weight:500;
    		background-size: 200% 100%;
    	  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #fff 50%);
    	  -webkit-transition: all .5s;
    	  -moz-transition: all .5s;
    	  transition: all .5s;
    	}

    	#aboutUs.col-md-7 {
    		z-index: 999;
    	}
    	#aboutUs p {
    		margin-top: 150px;
    		font-size: 16px;
    		line-height: 1.8em;
    		letter-spacing: 1.2px;
    		text-align: justify;
    		color: #fff;
    		border: 2px solid rgba(255, 255, 255, .8);
    		padding: 20px 30px;
    		margin-left: 40px;
    		font-weight: normal;
    	  -webkit-transition: all .5s;
    	  -moz-transition: all .5s;
    	  transition: all .5s;
    		z-index: 999;
    	}
    	.aboutUsfoto {
    	  background-image: url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg);
    		border-bottom: 5px solid #fff;
    		height: 600px;
    		background-position: center;
    		background-size: 100% 100%;
    		overflow: hidden;
    		background-size: cover;
    		line-height: 600px;
    		text-align: center;
    		width: 60vw;
    		margin-left: -140px;
    		z-index: 1;
position:absolute;
right:0;
    		-webkit-transition: all .5s;
    	  -moz-transition: all .5s;
    	  transition: all .5s;
    		opacity: .4;

    }

    
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <section id="aboutUs">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-12">
    				<h1>O nas</h1>
    			</div>
    			<div class="col-md-7">
    				<p class="desc wow bounceInLeft" data-wow-delay=".5s" data-wow-duration="1.2s">
    					Lorem ipsum dolor sit amet, consectetur <b>adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    					Ut enim ad minim veniam, <b>quis nostrud exercitation</b> ullamco laboris nisi ut aliquip ex ea commodo consequat.
    					Duis aute irure dolor in reprehenderit in voluptate velit esse cillum <b>dolore eu fugiat</b> nulla pariatur.
    					Excepteur sint occaecat cupidatat non proident, sunt in <b>culpa qui officia</b> deserunt mollit anim id est laborum.
    				</p>
    				<a href="#" class="btn btn-outline pull-right text-center wow bounceInLeft" data-wow-delay=".9s" data-wow-duration="1.2s">Czytaj więcej</a>
    			</div>
    			<div class="hidden-sm">
    				<div class="aboutUsfoto wow bounceInRight" data-wow-delay=".2s" data-wow-duration="1.2s">
    				</div>
    			</div>
    		</div>
    	</div>
    </section>

相关问题
最新问题