カップルの基本的なブートストラップに関する質問

私は、ウィンドウが変更されたときに自動サイズ変更を表示するために、ブートストラップに練習の割り当てを書いています。以前はブートストラップでは本当に働いたことはありませんでしたが、しかし、私の2つの列は、ページの下部近くで適切に平準化されていません。カップルの基本的なブートストラップに関する質問

ここは私のコードです。

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

OKちょっとメモリサイズ機能を動作させることに成功しました。私は、さまざまな画面サイズに異なるパラメータを割り当てる必要があったのは間違いありませんでした。 – Jonathan

ちなみに、8行目では、style = "min-height：80％;のようにstyle属性の中にmin-height：80％を入れてください。 – Alex

問題は、ブートストラップではありません。あなたのhtml/cssコードです。行divの特定の高さを設定し、2つの列の高さを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>

EDIT

、あなたは<table>なく<div>を使用する必要があります。画面のサイズを変更すると、divを分割して縦に並べるようにしました。

出典

2016-10-11 07:15:30

カップルの基本的なブートストラップに関する質問

答えて

関連する問題