Bootstrap 4 - 行destryoing布局 - 为什么需要排液？行和行液之间的差异

时间：2017-07-17 14:58:09

标签： html css twitter-bootstrap css3

＆＃13;
＆＃13; 
body {
	font-family: 'Ubuntu', sans-serif;
	background-color: #0d0d0d !important;
}
body a {
	color: #fff;
}
body a:hover {
	color: #fff;
}
@media (min-width: 1500px) {
	.container{
		width: 1470px !important;
	}
}
nav {
	background: #1c1c1c !important;
	color: #ccc !important;
}
.toper {
	padding: 100px;
	background: #071931;
	color: #fff;
}
.main {
	background: #121212;
	border-radius: 2px;
	margin-top: -60px;
	color: #fff;
	padding: 15px 15px;
}
.container-first {
	background: #2a2a2a;
	margin: 0px 0px 15px 0px;
	padding: 5px;
}
.breadcrumb {
	margin: 0px;
	background: #2a2a2a;
}
.social img
{
	margin-right: 15px;
	padding: 2px;
	background: #ccc;
	border-radius: 5px;
}
@media screen and (max-width: 992px) {
  .social img {
    margin-top: 10px;
  }
}
.welcome {
	background: #444;
	border-radius: 3px;
	padding: 0px !important;
	margin-bottom: 15px;
}
.margin-bottom-small
{
	margin-bottom: 10px;
}
.margin-bottom-small::before
{
	content: '';
	display: table;
}
.welcome-header
{
	padding: 15px 20px 15px 20px;
	background: #2d2d2d;
	border-radius: 3px;
	margin: 10px;
	box-shadow: inset 0px 0px 15px 0px #000;
}
.welcome-text
{
	padding: 10px;
	margin: 10px;
	color: #ccc;
}
.welcome-action {
	padding: 15px 0px 15px 20px;
	background: #4d4d4d;
	color: #ccc;
	letter-spacing: 5px;
	border-radius: 3px;
}
.bluer {
	padding: 15px;
	background: #046092;
	border-radius: 3px;
	font-weight: 500;
}
.section-bluer
{
	padding: 0px;
	margin-top: 15px;
}
.section-container
{
	padding: 0px;
}
.section-first
{
	background: #1c1c1c;
	padding: 10px;
	margin: 0px;
}
.section-picture
{
	padding: 5px;
	text-align: center;
}
.section-picture > img
{
	border: 1px solid #016d9b;
}
.section-this p
{
	color: #ccc;
	font-size: 12px;
}
.section-this h4 a
{
	color: #87b8d7;
	font-weight: 500;
}
.section-this hr
{
	border: none;
	border-top: 1px dotted #444;
}
.section-count {
	font-size: 12px;
}
.small-text {
	font-size: 10px;
}
.section-last-post
{
	padding: 0px;
}
.zero-padding
{
	padding: 0px;
}
@media (min-width: 992px)
{
	.last-topic-img
	{
		padding: 0px;
	}
	.section-count
	{
		padding: 0px;
	}
}
.last-topic p
{
	margin-bottom: 2px;
}
.abox
{
	background: #282828;
	border-radius: 2px;
	border: 1px solid #282828;
	padding: 5px;
	padding: 5px 0px 5px 10px;
	margin-right: 0px;
	margin-top: 15px;
}
.popular-autors p
{
	margin: 0px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
		
    
    <main class="container main">
			<div class="container-fluid container-first row">
				<div class="col-lg-9 col-md-12">
					<nav class="breadcrumb">
					  <a class="breadcrumb-item" href="#">Home</a>
					  <a class="breadcrumb-item" href="#">Library</a>
					  <a class="breadcrumb-item" href="#">Data</a>
					  <span class="breadcrumb-item active">Bootstrap</span>
					</nav>
				</div>
				<div class="col-lg-3 col-md-12 my-auto">
					<div class="float-lg-right text-center social">
						<a href="#"><img src="fb.png" /></a>
						<a href="#"><img src="tw.png" /></a>
						<a href="#"><img src="g.png" /></a>
					</div>
				</div>
			</div>
			<div class="container-fluid welcome">
				<div class="margin-bottom-small"></div>
				<header class="welcome-header">
					Witaj eeeeeeeeeeeee  | Kody, Porady | Gry online
				</header>
				<div class="welcome-text">
					<small>Zarejestruj się, aby otrzymać dostęp do wszystkich funkcjonalności forum.</small>
				</div>
				<div class="welcome-action">
					<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-log-in"></span> Zaloguj się</button>
					<button type="button" class="btn btn-secondary"><span class="glyphicon glyphicon-fire"></span> Zarejestruj się</button>
				</div>
			</div>
			<div class="container-fluid bluer">
				<a href="#">Najnowszy news: #98 Tygodnik yyyyyNews - O grach MMORPG słów kilka!</a>
			</div>

			<div clas="container-fluid">
				<div class="row">
					<div class="col-lg-9 zero-padding">
						<div class="container-fluid">
					<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
							<div class="row section-bluer">
								<div class="bluer">
									Projektyyyyyyyyyy
								</div>
								<div class="container-fluid section-container">
									<div class="row section-first">
										<div class="col-lg-1 section-picture my-auto">
											<img src="fb.png" />
										</div>
										<div class="col-lg-8 section-this my-auto">
											<h4><a href="#">League of Legends</a></h4>
											<p>Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.</p>
											<hr>
											<a href="#">Metin2 - Publikacje Serwerów, </a><a href="#">Metin2 - Publikacje Serwerów, </a><a href="#">Metin2 - Publikacje Serwerów, </a>
										</div>
										<div class="col-lg-1 section-count text-center my-auto small-text">
											<b>230683</b> tematy
											<b>1246366</b> odpowiedzi
										</div>
										<div class="col-lg-2 section-last-post my-auto">
											<div class="container">
												<div class="row">
													<div class="col-lg-4 my-auto last-topic-img text-center">
														<img src="fb.png" />
													</div>
													<div class="col-lg-8 small-text last-topic my-auto text-center">
														<p><a href="#">Przerwa techniczna 09-05-2…</a></p>
														<p><a href="#">Przez Krystian</a></p>
														<p>9 maj</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
					<!-- /////////////////////////////////////////////////////////////////////////////KONIEC 1 kategori -->
						</div>
				</div>
				<div class="col-lg-3 zero-padding">
					<div class="container-fluid">
						<div class="row-fluid abox">
								Reklama
						</div>
					</div>
					<div class="container">
						<div class="row abox">
								Popularni Autorzy
						</div>
					</div>
					<div class="container">
					<!-- /////////////////////////////////////////////////////////////////////////////Początek autora popularnego -->
						<div class="row text-center popular-autors" >
							<div class="col-xl-1 my-auto">
								<p>1</p>
							</div>
							<div class="col-xl-2 my-auto">
								<a href="#"><img src="fb.png" /></a>
							</div>
							<div class="col-xl-9 my-auto">
								<a href="#"><p>Misiegg</p></a>
								<p><span class="badge badge-pill badge-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 54</span></p>
							</div>
						</div>
					<!-- /////////////////////////////////////////////////////////////////////////////KONIEC autora popularnego -->
					</div>
					<div class="row abox">
							Ostatnie Posty
					</div>
					<div class="row">
						<div class="col-lg-2">
							
						</div>
						<div class="col-lg-10">
							
						</div>
					</div>
				</div>
			</div>
		</main>
＆＃13;
＆＃13;
＆＃13;

正如你所看到的那样：

enter image description here

将<div class="row section-bluer">更改为<div class="row-fluid section-bluer">

后，它看起来不错

为什么需要排液？

和

enter image description here

为什么左侧有自由空间？无论我尝试做什么，我都无法修复它。

一般来说，行和行液之间有什么区别？

我在每个页面的文档https://v4-alpha.getbootstrap.com/layout/grid/中查找此内容，并且绝对没有相关信息。

使用bootstrap 4文档中的代码中的任何地方row，从不row-fluid为什么？

为什么在我的例子中我需要排液？这两者之间有什么区别？

1 个答案:

答案 0 :(得分：1)

There are too many nested container/container-fluid. You only need 1 outer container, and nested columns should always be placed directly in .row.

Pseudo code...

   container
       row
         col-*
            row 
              col-*
              col-*
            /row
         /col
       /row
   /container
相关问题
最新问题