Ein paar grundlegende Bootstrap-Fragen

Ich schreibe eine Übungsaufgabe im Bootstrap, nur um die automatische Größenanpassung zu zeigen, wie das Fenster geändert wird, ich habe noch nie wirklich mit Bootstrap gearbeitet, aber ich habe es mit relativ minimalem Aufwand eingerichtet. Meine beiden Spalten sind jedoch nicht am unteren Rand der Seite ausgerichtet.Ein paar grundlegende Bootstrap-Fragen

Hier ist mein Code.

<!DOCTYPE html> 
<html> 
<head> 
<title>Chat appplication</title> 
</head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class ="container" min-height: 80%> 
<div class="row" > 
    <div class = "col-md-12" style="border: 1px solid black"> <center> You are known as Emerald Dragon in Nirvana room</center> </div> 
</div> 

<div class ="row"> 
    <div class = "col-md-8" style="border: 1px solid black"> <font color="blue" font size="1">:INFO James has joined Nirvana room </font> 
    <font size ="1"> 

    <p>James: Hi, Dragon </p> 
    <p> Emerald Dragon: What's up </p> 
    </font> </div> 
    <div class = "col-md-4" style="border: 1px solid black"> <font size ="4"> <center> List of available rooms </center> 

    <font size ="1"> 
    <p>Lobby</p> 
    <p>Conference room</p> 
    <p>Lab</p> 
    <p>Coffe house</p> 
    <p> Nirvans</p> 
    </font> 

    </div> 

    </div> 
</div> 

</html>

Dies ist, was mein Code https://gyazo.com/a550bac980fc12ad703fcab1cf2af94e

auch produziert, wenn ich den Bildschirm passen die Größe die Größe nicht automatisch die Tabellen es sie nur vertikal verbindet, ich denke, das liegt daran, dass ich noch nicht erklärt die Bootstrap-Varianten für die verschiedenen Bildschirmgrößen.

https://gyazo.com/f620e42da5299f3ca8bb186bd2c05407

Quelle

2016-10-10 Jonathan

OK nur eine Anmerkung, die ich erfolgreich die Größenanpassung funktioniert zu bekommen. Ich hatte recht, die verschiedenen Parameter für die verschiedenen Bildschirmgrößen zuordnen zu müssen. – Jonathan

Übrigens, in Zeile 8 sollten Sie min-height: 80% innerhalb des style-Attributs wie style = "min-height: 80%;" – Alex

Das Problem ist in der Bootstrap nicht. Es ist Ihr HTML/CSS-Code. Sie müssen eine bestimmte Höhe für das Zeilen-div festlegen und dann die Höhe der beiden Spalten auf 100% setzen, so dass ihre Höhe die gesamte Höhe des Zeilen-divs ausfüllt.

Hier ist, was ich an Ihrem Code tat:

<!DOCTYPE html> 
<html> 
<head> 
<title>Chat appplication</title> 
</head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class ="container" min-height: 80%> 
<div class="row" > 
    <div class = "col-md-12" style="border: 1px solid black"> <center> You are known as Emerald Dragon in Nirvana room</center> </div> 
</div> 

<div class ="row" style="height: 150px"> 
    <div class = "col-md-8" style="border: 1px solid black; height: 100%"> <font color="blue" font size="1">:INFO James has joined Nirvana room </font> 
    <font size ="1"> 

    <p>James: Hi, Dragon </p> 
    <p> Emerald Dragon: What's up </p> 
    </font> </div> 
    <div class = "col-md-4" style="border: 1px solid black; height: 100%"> <font size ="4"> <center> List of available rooms </center> 

    <font size ="1"> 
    <p>Lobby</p> 
    <p>Conference room</p> 
    <p>Lab</p> 
    <p>Coffe house</p> 
    <p> Nirvans</p> 
    </font> 

    </div> 

    </div> 
</div> 

</html>

EDIT

Für die Tabellen dann werden Sie <table> und nicht <div> verwenden. Sie haben die Divs getrennt, deshalb wird sie vertikal ausgerichtet, wenn Sie die Größe des Bildschirms ändern.

Quelle

2016-10-11 07:15:30

Ein paar grundlegende Bootstrap-Fragen

Antwort

Verwandte Themen