引導 - 一行行超越了一點

body { 
 
    font-family: 'Ubuntu', sans-serif; 
 
    background: #0d0d0d; 
 
} 
 

 
body a { 
 
    color: #fff; 
 
} 
 

 
body a:hover { 
 
    color: #fff; 
 
} 
 

 
@media (min-width: 1500px) { 
 
    .container { 
 
    width: 1470px !important; 
 
    } 
 
} 
 

 
nav { 
 
    background: #1c1c1c !important; 
 
    margin-bottom: 50px; 
 
} 
 

 
.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; 
 
} 
 

 
.container-first-right { 
 
    padding-top: 2px; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .container-first-right { 
 
    float: none !important; 
 
    } 
 
} 
 

 
.welcome { 
 
    background: #444; 
 
    border-radius: 3px; 
 
    padding: 0px !important; 
 
    margin-bottom: 15px; 
 
} 
 

 
.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-first { 
 
    background: #1c1c1c; 
 
} 
 

 
.section-picture { 
 
    vertical-align: middle; 
 
    padding: 5px; 
 
} 
 

 
.section-picture>img { 
 
    border: 1px solid #016d9b; 
 
}

<!DOCTYPE html> 
 
<html lang="pl"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
    <script src="js/jquery.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"> 
 
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <main class="container main"> 
 
    <div class="container-fluid bluer"> 
 
     <a href="#">Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!</a> 
 
    </div> 
 
    <div clas="container-fluid row"> 
 
     <div class="col-sm-8 section-bluer"> 
 
     <div class="bluer"> 
 
      Projekty Firaszka 
 
     </div> 
 
     <div class="row section-first"> 
 
      <div class="col-sm-1 section-picture"> 
 
      <img src="fb.png" /> 
 
      </div> 
 
      <div class="col-sm-8 section-this"> 
 
      asdasdas 
 
      </div> 
 
      <div class="col-sm-3 section-last-post"> 
 
      asdasd 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     </div> 
 
    </div> 
 
    </main> 
 
</body> 
 

 
</html>

正如你可以看到

這就是問題所在。

排在行和row section-first"去beyong上一行

試了很多事情，但完全地不知道一點點如何解決它。

這是不符合前一行的寬度的問題。

來源

2017-07-13 Krystian Polska

Bootstrap類.row已經利潤率左&保證金右的-15px。

您需要通過去除餘裕&餘裕來彌補這一點。就像這樣：

.section-first { 
    margin: 0; 
}

或

.section-first { 
    margin-left: 0; 
    margin-right: 0; 
}

來源

2017-07-13 13:13:11

謝謝。完全錯過了這個保證金，鉻沒有告訴我這一個mehh –

設置.section-first餘量爲0 ......簡單:)

.section-first { 
    margin: 0; 
}

來源

2017-07-13 13:35:30

PLZ糾正你的引導HTML結構，如：

集裝箱> row> col- -

或

容器流體>排液>同事-

你把「行」與「容器」，它不是正確的格式，你必須創建等給出結構： -

<div class="container"> 
    <div class="row"> 
    <div class="col-md-5"></div>  
    </div> 
</div>

您的html代碼是在這裏 enter link description here

來源

2017-07-13 13:43:59

謝謝你這一點:)。 –

引導 - 一行行超越了一點

回答

相關問題