Bootstrap-Spalten werden nicht richtig ausgerichtet, stattdessen ist einer unter dem anderen

Ich hoffe, dass jemand mir helfen kann. Ich mache wahrscheinlich einen dummen Fehler, aber ich folge dem Udacity-Video und der Code sieht identisch aus. Vielen Dank im Voraus.Bootstrap-Spalten werden nicht richtig ausgerichtet, stattdessen ist einer unter dem anderen

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <img src="images/logo.jpg" alt="Udacity logo"> 
       </div> 
       <div class="col-md-6"> 
        <h1>John Doe</h1> 
        <h4>Front-end Ninja</h4> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2016-07-20 Phrike

Ist der Pfad zu Ihrem 'bootstrap.css' richtig? Sieht vielleicht albern aus, aber es ist ein häufiger Fehler. – trajchevska

Ja, ich dachte das Gleiche. Der Dateipfad lautet: C: \ Benutzer \ Eden \ Desktop \ Udacity \ Intro zu HTML und CSS \ Portfolio \ css und dann die Datei bootstrap.css. – Phrike

Der relative Pfad, auf den Sie zugreifen möchten, sollte vom Pfad der aktuell geöffneten HTML-Datei abhängen. Ich nehme an, dass Ihre HTML-Datei in "Intro to HTML" ist. Wenn das der Fall ist, sollten Sie den css-Pfad zu 'CSS/Portfolio/css/bootstrap.css' ändern. – trajchevska

Der wahrscheinlichste Grund ist, dass der Code auf Browser-Fenster Breite abhängig ist - der Code col-md-6 nur zwei Spalten auf Browser-Fensterbreite von 992px oder breiter herzustellen.

Versuchen Sie, die Klasse col-md-6 durch col-sm-6 für beide Divs zu ersetzen, die diese Klasse verwenden. Dies sollte sicherstellen, dass die Spalten auch bei kleineren Größen nebeneinander angezeigt werden.

Alternativ können Sie den Bildschirm breiter machen, um zu sehen, wie sich die Spalten basierend auf der Bildschirmbreite bewegen.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-6"> 
        <img src="images/logo.jpg" alt="Udacity logo"> 
       </div> 
       <div class="col-sm-6"> 
        <h1>John Doe</h1> 
        <h4>Front-end Ninja</h4> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2016-07-20 20:30:10 Toby

Wow! Danke, das war ein dummer Fehler. Ich habe den Browser im Vollbildmodus geöffnet und es hat sich geändert. Ich denke, ich werde es in "col-sm-6" ändern. Danke vielmals! – Phrike

Denken Sie daran, dass Bootstrap ein Mobile-First-Framework ist; Wenn Sie etwas in allen Größen anwenden möchten, verwenden Sie 'col-xs- *' ('sm' funktioniert auch in den meisten Fällen) –

Wie die Antwort über meine, bedenken Sie, dass Bootstrap absichtlich das Layout auf der Bildschirmgröße ändert - das ist Sich anpassendes Design. Sehen Sie hier für weitere Informationen: http://getbootstrap.com/css/#grid – Toby

Stellen Sie sicher, dass Sie die richtigen Spaltengrößen verwenden. xs ist für 768 unter, sm ist zwischen 768 und 991, md und lg sind 991 über.

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Portfolio</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-xs-6"> 
 
        <img src="images/logo.jpg" alt="Udacity logo"> 
 
       </div> 
 
       <div class="col-xs-6"> 
 
        <h1>John Doe</h1> 
 
        <h4>Front-end Ninja</h4> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

Quelle

2016-07-20 20:30:26 zsawaf

Vielen Dank für Ihre Hilfe! :) – Phrike

Alles scheint mit Ihrem Code zu funktionieren.

http://codepen.io/anon/pen/JKLbvQ

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Portfolio</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Udacity logo"> 
       </div> 
       <div class="col-md-6"> 
        <h1>John Doe</h1> 
        <h4>Front-end Ninja</h4> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2016-07-20 20:35:07

Ja, es war eine Frage der Größe meines Fensters :) – Phrike

einfach auf die richtige Antwort auf add on (https://stackoverflow.com/a/38490294/3718753) es gute Praxis ist mehrere Klassen auf Ihre Spalten enthalten, so dass sie in geeigneter Weise an unterschiedliche Bildschirmgrößen skaliert werden.

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
 
      <img src="images/logo.jpg" alt="Udacity logo"> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
 
      <h1>John Doe</h1> 
 
      <h4>Front-end Ninja</h4> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2016-07-20 21:08:54 ScarpMetal

Ah, das habe ich nie realisiert. Vielen Dank! :) – Phrike

Bootstrap-Spalten werden nicht richtig ausgerichtet, stattdessen ist einer unter dem anderen

Antwort

Verwandte Themen