Пара основных вопросов начальной загрузки

Я пишу назначение практики в бутстрапе, чтобы показать автоматическое изменение размера при изменении окна, я никогда не работал с начальной загрузкой раньше, но мне удалось настроить его с минимальными усилиями. однако мои две колонки неправильно выравниваются в нижней части страницы.Пара основных вопросов начальной загрузки

вот мой код.

<!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 вы должны поставить min-height: 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>

EDIT

Для таблиц, то вы должны будете использовать <table> и не <div>. Вы разделили divs, поэтому он выравнивается по вертикали, если вы изменяете размер экрана.

источник

2016-10-11 07:15:30

Пара основных вопросов начальной загрузки

ответ

Смежные вопросы