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;
}<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>如你所见:
而且我改了之后还不错<div class="row section-bluer">至 <div class="row-fluid section-bluer">
为什么需要row-fluid？
和
为什么左边有空闲空间？无论我尝试做什么，我都无法修复它。
一般来说，row 和 row-fluid 之间有什么区别？
我在文档中寻找这个 https://v4-alpha.getbootstrap.com/layout/grid/ ，每一页，而且绝对没有这方面的信息。
并且在 bootstrap 4 文档的代码中到处都使用了 row , 从不 row-fluid为什么？
为什么在我的例子中我需要 row-fluid？这两者之间的一般区别是什么？
最佳答案
container/container-fluid 嵌套过多。您只需要 1 个外部容器，嵌套列应始终直接放在 .row 中。
伪代码...
container
row
col-*
row
col-*
col-*
/row
/col
/row
/container
关于html - Bootstrap 4 - 行破坏布局 - 为什么需要行流体？行和行流体之间的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45147493/