Bootstrap: Thumbnail создает горизонтальное переполнение

Я пытаюсь исправить это в течение 2 часов, я даже переписываю весь сайт, чтобы увидеть, что создает переполнение, и только что понял, когда добавляю компонент «thumbnail» создает горизонтальное переполнение, которое действительно расстраивает.Bootstrap: Thumbnail создает горизонтальное переполнение

Вот окутанная версия моего сайта, попробуйте удалить раздел миниатюр, и вы увидите, что все в порядке. Но с ним переполнение.

Что происходит?

http://codepen.io/kreitzo/pen/QyoRMx

index.html

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

<head> 
    <title>Kreitzo</title> 

    <link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" /> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="author" content="William Kreitz"> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="./js/script.js"></script> 
    <script src="typed.js"></script> 

    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/styles.css" type="text/css" rel="stylesheet" /> 

</head> 

<body> 
    <main> 
    <nav> 
     <div id="nav_wrapper"> 
     <ul> 
      <li><a href="#">Home</a> 
      </li> 
      <li><a href="#">About me</a> 
      </li> 
      <li><a href="#">Work</a> 
      </li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </nav> 
    <header> 
     <div class="jumbotron"> 
     <div class="container"> 
      <h1>Hey everyone!</h1> 
      <div class="applist_wrapper"> 
      <p id="subject_title">Download my</p> 
      <p id="subjects" class="type-wrap"><span id="typed">Hello?</span></p> 
      </div> 
     </div> 
     </div> 
    </header> 


    <section> 
     <div class="row"> 
     <div class="thumbnail"></div> 
     </div> 
    </section> 

    <footer> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"> 
      <ul class="list-inline"> 
       <li><a href="#">Home</a> 
       </li> 
       <li><a href="#">About me</a> 
       </li> 
       <li><a href="#">Work</a> 
       </li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
      <div class="col-xs-12"> 
      <p id="copyright">Copyright © WK 2016. All Rights Reserved</p> 
      </div> 
     </div> 
     </div> 
    </footer> 


    </main> 
    <script src="js/bootstrap.js"></script> 


</body> 

</html>

style.css

/* Fonts */ 

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); 

/* Body */ 

html, 
body { 
    padding: 0; 
    margin: 0; 
    font-family: 'Quicksand', sans-serif; 
} 


/* Nav */ 

nav { 
    background-color: #232323; 
    top: 0; 
    position: fixed; 
    width: 100%; 
} 

#nav_wrapper { 
    text-align: center; 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
} 

nav ul li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 15px; 
    -webkit-transition: background-color 0.5s; 
    /* Safari */ 
    transition: background-color 0.5s; 
} 

nav ul li a { 
    text-decoration: none; 
    margin-right: 20px; 
    margin-left: 20px; 
    color: white; 
    text-transform: uppercase; 
    -webkit-transition: background-color 0.5s; 
    /* Safari */ 
    transition: background-color 0.5s; 
} 

@media (min-width:400px) { 
    nav ul li a { 
    margin: 0; 
    } 
    ; 
} 

nav ul li:hover { 
    background-color: #5d4037; 
    cursor: pointer; 
} 

nav ul li:hover a { 
    color: whitesmoke; 
    text-decoration: none; 
} 


/* Jumbotron */ 

.jumbotron { 
    margin-top: 50px; 
} 

.title { 
    text-transform: uppercase; 
    text-align: right; 
    padding: 0; 
} 

.jumbotron { 
    background: url(../images/DeathtoStock_Wired7.jpg) center center no-repeat; 
    background-size: 100% auto; 
    height: 500px; 
} 

.jumbotron .container { 
    text-align: right; 
} 


/* About */ 

#about { 
    margin-bottom: 120px; 
} 

.spacing { 
    margin-bottom: 50px; 
} 


/* App thumbnails */ 

.thumbnail { 
    color: #747704; 
    margin: 0; 
} 

.thumbnail img { 
    height: 250px; 
    width: 250px; 
    border-radius: 30px; 
} 

.thumbnail h3 { 
    text-transform: uppercase; 
} 

.image:hover { 
    -webkit-box-shadow: 0px 0px 20px 5px rgba(0, 185, 233, .75); 
    box-shadow: 0px 0px 20px 5px rgba(0, 185, 233, .75); 
} 

.image { 
    -webkit-transition: all 0.7s ease; 
    transition: all 0.7s ease; 
} 


/* Footer */ 

footer { 
    background-color: #232323; 
    padding: 50px; 
} 

footer a { 
    color: white; 
    text-transform: uppercase; 
    font-size: 10px; 
    -webkit-transition: color 0.5s; 
    /* Safari */ 
    transition: color 0.5s; 
} 

footer a:hover { 
    color: #5d4037; 
    text-decoration: none; 
} 

footer #copyright { 
    color: dimgray; 
} 


/* application list autotyper */ 

.applist_wrapper p { 
    margin: 0; 
    padding: 0; 
    margin-left: 20px; 
    font-size: 40px; 
    display: inline-block; 
    line-height: 80px; 
    vertical-align: top; 
} 

@media (min-width:320px) { 
    .applist_wrapper p { 
    font-size: 20px; 
    } 
    ; 
} 

@media (min-width:481px) { 
    .applist_wrapper p { 
    font-size: 30px; 
    } 
    ; 
} 

@media (min-width:641px) { 
    .applist_wrapper p { 
    font-size: 35px; 
    } 
    ; 
} 

#typed { 
    color: yellow; 
} 


/* cursor blinker */ 

.typed-cursor { 
    color: yellow; 
    opacity: 1; 
    -webkit-animation: blink 1s infinite; 
    -moz-animation: blink 1s infinite; 
    animation: blink 1s infinite; 
} 

@keyframes blink { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
    ; 
} 

@-webkit-keyframes blink { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
    ; 
} 

@-moz-keyframes blink { 
    0% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
    ; 
}

источник

2016-02-16 Apswak

Добавить контейнер перед вашей строки тега:

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="thumbnail"></div> 
     </div> 
    </div> 
</section>

Поскольку контейнер дает вам автоматически добавление и параметр margin.

источник

2016-02-16 16:00:46 Koschtik

Работал. Принято как ответ, спасибо. – Apswak

. Добро пожаловать, контейнер дает вам автоматически добавление и параметр margin. – Koschtik

Bootstrap: Thumbnail создает горизонтальное переполнение

ответ

Смежные вопросы