Bootstrap - 一行一行超出它一点

Question

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" 比上一行稍稍超出了一点

尝试了很多东西，但完全不知道如何解决它。

此行的宽度与上一行不符是个问题。

Answer 1

Bootstrap class .row 有 margin-left & margin-right of -15px.

您需要通过删除 margin-left 和 margin-right 来弥补这一点。像这样：

.section-first {
    margin: 0;
}

或

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

Answer 2

将.section-first边距设置为0......简单:)

.section-first {
    margin: 0;
}

Answer 3

请更正您的 bootstrap html 结构，例如：

容器 > 行 > col--

或

container-fluid > row-fluid > col--

你把 "row" 和 "container" 放在一起，它的格式不正确，你必须像给定的结构一样创建 :-

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

您的 html 代码在这里 enter link description here

Bootstrap - 一行一行超出它一点

Bootstrap - row in row that goes beyond it a bit

html

css

bootstrap-grid