Устранение неполадок- Bootstrap не отвечает

Im работает над блоком/блоком загрузки, и у меня возникают некоторые проблемы. Может быть, дополнительная пара глаз может помочь мне здесь. Его супер простой прямо сейчас и просто много текста заполнителя, но он не отвечает на размер экрана. У меня есть некоторые другие стили, но ничего серьезного и не переопределяет загрузку. Просто в основном b = цвета фона и высоты. Я не уверен, почему он не работает. Я должен упомянуть, что я использую только cdn, потому что буду работать с google blogger. Любые предложения были бы замечательными. Спасибо.Устранение неполадок- Bootstrap не отвечает

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>MIM</title> 
 
    <link rel="stylesheet" type="text/css" href="css/main.css"/> 
 
    <!-- Bootstrap --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    \t <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="socialMedia text-center"> 
 
    \t \t \t <div class="col-xs-12"> 
 
    \t \t \t \t <!--Social Media Section--> 
 
    \t \t \t \t <a href='http://facebook.com/MommyinMKE' target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class='smg-label'>facebook</span></a> 
 
\t \t \t \t \t <a href='http://twitter.com/MommyinMKE' target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i><span class='smg-label'>twitter</span></a> 
 
\t \t \t \t \t <a href='https://www.instagram.com/keilalleist/' target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i><span class='smg-label'>instagram</span></a> 
 
\t \t \t \t \t <a href='http://pinterest.com/keilaleist' target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i><span class='smg-label'>pinterest</span></a> 
 
\t \t \t \t \t <a href='https://www.youtube.com/channel/UCNMVemcUPuscLSNyeXZje8Q' target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i><span class='smg-label'>youtube</span></a> 
 
\t \t \t \t \t <a href='https://www.bloglovin.com/blogs/mommy-in-milwaukee-12557621' target="_blank"><i class="fa fa-heart" aria-hidden="true"></i><span class='smg-label'>bloglovin</span></a> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-xs-12 text-center"> 
 
    \t \t \t [widget for header placed here] 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="navBar"> 
 
    \t \t \t <div class="col-xs-12 text-center"> 
 
\t  \t \t \t <!--Nav Section--> 
 
\t  \t \t \t <h2>NavBar</h2> 
 
\t  \t \t \t <span>.col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="Carasouel"> 
 
\t  \t \t <div class="col-xs-12 text-center"> 
 
\t  \t \t \t <!--Carasouel--> 
 
\t  \t \t \t <h2>Carasouel</h2> 
 
\t  \t \t \t <span>.col-xs-12</span> 
 
\t  \t \t </div> 
 
\t  \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    \t <div class="row"> 
 
\t \t \t <div class="sideBar text-center"> 
 
    \t \t \t <div class="col-lg-3 col-md-3 col-xs-12 text-center"> 
 
    \t \t \t \t <!--sideBar Section--> 
 
    \t \t \t \t <h2>Side Bar</h2> 
 
    \t \t \t \t <span>col-lg-3 col-md-3 col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 

 
    \t \t <div class="smallCarasoul text-center"> 
 
    \t \t \t <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> 
 
    \t \t \t \t <!--Blog Content--> 
 
    \t \t \t \t <h2>Small Carasoul</h2> 
 
    \t \t \t \t <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
\t \t \t 
 
    \t \t <div class="blogContent text-center"> 
 
    \t \t \t <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> 
 
    \t \t \t \t <!--Blog Content--> 
 
    \t \t \t \t <h2>Blog Content</h2> 
 
    \t \t \t \t <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="socialMedia2 text-center"> 
 
    \t \t \t <div class="col-xs-12"> 
 
\t \t  \t \t <!--Social Media--> 
 
\t \t  \t \t <h2>Social Media</h2> 
 
\t \t  \t \t <span>.col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="instragram text-center"> 
 
    \t \t \t <div class="col-xs-12"> 
 
\t  \t \t \t <!--Instagram--> 
 
\t  \t \t \t <h2>Instagram</h2> 
 
\t  \t \t \t <span>.col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="footer text-center"> 
 
    \t \t \t <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12"> 
 
    \t \t \t \t <!--Footer Section--> 
 
    \t \t \t \t <h2>Footer</h2> 
 
    \t \t \t \t <span>col-lg-9 col-md-9 col-sm-9 col-xs-12</span> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div> 
 

 

 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    </body> 
 
    </html>

body { 
color: #343434; 
font:normal normal 13px Open Sans; 
line-height: 24px; 
letter-spacing: 0px; 
text-transform: none; font-weight: 400; 
} 

p { 
font-size:13px; 
line-height:26px; 
} 

a { 
text-decoration:none; 
color:#777777; 
} 

a:hover { 
color:#000000 
} 

h1,h2,h3,h4,h5,h6 { 
font-family:"Open Sans", sans-serif; 
} 

.container { 
    width:1100px; 
    margin:0 auto; 
} 


.container .row .socialMedia .col-xs-12 { 
    background-color:#eec7bc; 
    height:48px; 
    text-transform: uppercase; 
    color: #ffffff; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
font-family: 'Lato', sans-serif; 
} 

.socialMedia a i { 
font-size: 11px; 
padding-right: 7px; 
line-height:48px; 
color:#ffffff; 
-webkit-transition: all 0.2s linear; 
-moz-transition: all 0.2s linear; 
-ms-transition: all 0.2s linear; 
-o-transition: all 0.2s linear; 
transition: all 0.2s linear; 
} 

.socialMedia a { 
padding-left: 50px; 
} 

.socialMedia a { 
color:#ffffff; 
} 

.socialMedia a:hover { 
    color:#777777; 
    text-decoration: none; 

} 

.container .row .socialMedia2 .col-xs-12 { 
    background-color:#eec7bc; 
    height:100px; 
} 

.container .row .navBar .col-xs-12 { 
    border-top: 2px solid #eec7bc; 
    border-bottom: 2px solid #eec7bc; 
    padding-top:20px; 
    padding-bottom:20px; 
    margin-bottom:40px; 
} 

.container .row .navBar .col-xs-12 h2{ 
margin-top:0px; 
} 

.container .row .Carasouel .col-xs-12 { 
background-color:gray; 
height:540px; 
margin-bottom:50px; 
} 

.container .row .smallCarasoul .col-xs-12 { 
    background-color:gray; 
    height:470px; 
    margin-bottom:30px; 
} 

.container .row .sideBar .col-xs-12 { 
background-color:red; 
height:1000px; 
} 

.container .row .blogContent .col-xs-12 { 
background-color:blue; 
height:500px; 
} 



/************************************************* 
* 10. Tablet         * 
*************************************************/ 

@media only screen and (min-width: 768px) and (max-width: 960px) { 
    .socialMedia a { 
    padding-left: 20px; 
    } 
} 

/************************************************* 
* Mobile Portrait        * 
*************************************************/ 

@media only screen and (max-width: 767px) { 
.socialMedia span { 
    display: none; 
} 

.socialMedia a { 
    padding-left: 20px; 
} 
} 

/************************************************* 
* 10. Landscape        * 
*************************************************/ 

@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .socialMedia a i { 
     font-size: 14px; 
    } 
}

источник

2017-02-22 Jessica

Предоставленный вами код не реплицирует проблему. Пожалуйста, дайте нам [mcve], который иллюстрирует проблему. –

Пожалуйста, прикрепите код css/main.css здесь. –

Кажется, он отлично работает для меня (он корректирует размер видового экрана). Как и другие, вы можете предоставить полный CSS? –

Вы устанавливаете .container к фиксированной шириной 1100px, которая делает его придерживаться этой ширины и не собирается какой-либо узкой. Вместо этого вы должны использовать max-width: 1100px.

источник

2017-02-22 17:27:38

Конечно, я сделал..лол !! Спасибо. Иногда вы снова и снова смотрите на одно и то же, вы пропускаете простые вещи. Еще раз спасибо вам большое! – Jessica

Нет проблем. Не волнуйтесь, вы начнете замечать эти мелочи намного быстрее. –

Устранение неполадок- Bootstrap не отвечает

ответ

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