0 

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"稍微超出前一排

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

此行的宽度不适合上一行是有问题的。

4

3 回答 3

1

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

容器>行>列--

或者

容器流体 > 行流体 > col- -

您将“行”与“容器”放在不正确的格式中，您必须像给定的结构一样创建：-

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

您的 html 代码在此处 输入链接描述

于 2017-07-13T13:43:59.807 回答
1

Bootstrap 类.row的margin-left 和 margin-right为-15px。

您需要通过删除左边距和右边距来补偿这一点。像这样：

.section-first {
    margin: 0;
}

或者

.section-first {
    margin-left: 0;
    margin-right: 0;
}
于 2017-07-13T13:13:11.487 回答
0

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

.section-first {
    margin: 0;
}
于 2017-07-13T13:35:30.933 回答