Question

我在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

Answer 1

问题不在引导程序中。这是你的html / css代码。您必须为行div设置特定高度，然后将两列的高度设置为100％，以便它们的高度将填满行div的整个高度。

以下是我对您的代码所做的事情：

var obj = [{key1: Value1, key2: value2},{key1: Value1, key2: value2}];

修改

对于表格，您必须使用<!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分隔为垂直对齐的原因。

几个基本的引导问题

1 个答案: