2016-07-20 17 views
0

Ich versuche, eine Profilseite mit dem Bootstraps Grid-System zu erstellen, es würde perfekt funktionieren, aber leider hat meine Seite eine andere responsive dynamische Funktion - ein Menü erscheint auf der linken Seite bei größeren Auflösungen.Bootstrap Grid System Ausrichtung

Dieses Menü wirkt sich auf die Spalten aus, da das Raster denkt, dass es nicht nach rechts geschoben wird und sich von der Seite ausbreitet! Wenn sich das Menü bei kleineren Auflösungen nach oben bewegt, macht Bootstrap seine Sache richtig. Siehe http://hertfordhotshots.weebly.com/honors.html und spiele mit den Breiten, um mein Problem zu sehen.

Gibt es etwas, was ich tun kann, um bootstrap mir den gewünschten Effekt zu geben und das Menü auf der linken Seite zu halten?

Danke für Ihre Hilfe!

+0

Bitte ** minimales Arbeitsbeispiel ** von Code schreiben (HTML/CSS/JS) in einem [Snippet] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Siehe [mcve] und [fragen]. – vanburen

Antwort

1

Vielleicht funktioniert das ... im HTML Snipe in Klasse = "Team" ... Eliminiere class = "container" und class = "row" ... stattdessen, dass class = "col-lg -12 col-md-12 col-sm-12 col-xs-12 "in beiden divs ...

<section class="team"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">//class="container 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">//class="row" 
     <div class="col-md-10 col-md-offset-1"> 
      <div class="col-lg-12"> 
      <h6 class="description">CURRENT TEAM</h6> 
      <div class="row pt-md"> 
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 profile"> 
       <div class="img-box"> 
       <img src="http://placehold.it/600x600" class="img-responsive"> 
       <ul class="text-center"> 
        <a href="#"><li><i class="fa fa-facebook"></i></li></a> 
        <a href="#"><li><i class="fa fa-twitter"></i></li></a> 
        <a href="#"><li><i class="fa fa-linkedin"></i></li></a> 
       </ul> 
       </div> 
      <h1>Joe McClemont</h1> 
      <h2>Co-founder/ Midfielder</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </div> 
     ... 
    ... 
    ... 
    </div> 
    </div> 
</div> 

+0

Es hat funktioniert! Vielen Dank, mein Herr! – UnluckyForSome

+0

Gern geschehen, Sir. –