Fehlerbehebung Bootstrap reagiert nicht

Ich arbeite an einem Bootstrap Blog/Site und ich habe ein paar Probleme. Vielleicht kann mir ein zusätzliches Paar Augen helfen. Es ist im Moment super einfach und nur eine Menge Platzhalter Text, aber es reagiert nicht auf die Bildschirmgröße. Ich habe einige andere Stile, aber nichts Ernstes und überschreibt Bootstrap nicht. Hauptsächlich b = Hintergrundfarben und -höhen. Ich bin mir nicht sicher, warum es nicht funktioniert. Ich sollte erwähnen, ich verwende nur die CDN, weil ich mit Google Blogger arbeiten werde. Irgendwelche Vorschläge, wäre großartig. Vielen Dank.Fehlerbehebung Bootstrap reagiert nicht

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

Quelle

2017-02-22 Jessica

Der von Ihnen bereitgestellte Code repliziert das Problem nicht. Bitte geben Sie uns eine [mcve], die das Problem veranschaulicht. –

können Sie bitte css/main.css code hier anhängen. –

Es scheint für mich perfekt zu funktionieren (es passt sich an die Größe des Ansichtsfensters an). Wie andere schon sagten, können Sie das vollständige CSS bereitstellen? –

Sie setzen Ihre .container auf eine feste Breite von 1100px, die sie zu dieser Breite Stick macht und nicht schmaler gehen. Sie sollten stattdessen max-width: 1100px verwenden.

Quelle

2017-02-22 17:27:38

Natürlich habe ich ..lol !! Vielen Dank. Manchmal starrst du immer wieder auf das gleiche Ding, du vermisst die einfachen Dinge. Nochmals vielen Dank! – Jessica

Kein Problem. Mach dir keine Sorgen, du wirst diese kleinen Dinge viel schneller bemerken. –

Fehlerbehebung Bootstrap reagiert nicht

Antwort

Verwandte Themen