幾個基本的引導問題

我正在寫bootstrap中的一個練習任務，只是爲了顯示自動調整大小，因爲窗口改變了，我從來沒有真正使用bootstrap，但我設法用相當小的努力設置它。但是，我的兩列在頁面底部附近未正確調平。幾個基本的引導問題

這是我的代碼。

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

這是我的代碼是生產 https://gyazo.com/a550bac980fc12ad703fcab1cf2af94e

另外，如果我調整屏幕也不會自動調整它只是加入他們的垂直表，我想這是因爲我還沒有宣佈不同屏幕尺寸的引導程序變體。

https://gyazo.com/f620e42da5299f3ca8bb186bd2c05407

來源

2016-10-10 Jonathan

確定只是一個說明，我成功地設法調整大小功能的工作。我不得不爲不同的屏幕尺寸分配不同的參數。 – Jonathan

順便說一下，在第8行中，您應該在樣式屬性中加入最小高度：80％，例如style =「min-height：80％;」 – Alex

的問題是不是在引導。這是你的html/css代碼。您必須爲行div設置特定的高度，然後將兩列的高度設置爲100％，以使其高度填充行div的整個高度。

這裏就是我做你的代碼：

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

編輯

對於此表，那麼你將不得不使用<table>而不是<div>。你分開divs，這就是爲什麼它調整垂直如果你調整屏幕。

來源

2016-10-11 07:15:30

幾個基本的引導問題

回答

相關問題