0
Мне показалось, что я понял, что понял Bootstrap и Flex, когда он внезапно начал делать странные вещи, и я не могу понять, где я ошибся. Вопросы, которые я испытываю, следующие:Совет должен исправить ошибку flex/bootstrap.
- Контейнер не перемещается в длину его содержимого. Он отказывается сдвинуться с места за пределы 210 пикселей. У меня такой длины нет.
- При изменении размера экрана три столбца в верхней строке не изменяются таким образом, чтобы поддерживать полную 100-процентную ширину. Они просто вытаскивают левую руку и хлюпают там, как будто они страдают от страха!
- Во второй строке у меня есть две колонки. Правая колонка содержит изображения, которые упорно отказываются изменить размер, хотя я использую IMG реагирующего класс ... НО колонка левой руки делает размер, но на самом деле хлюпает до невыносимого крошечного нечитаемым ширина
Ниже мой HTML и CSS-коды.
Действительно оцените любую помощь.
Благодаря Терри
body {
background-color: #B09D32;
}
.container {
\t max-width: 970px;
\t height: 100%;
\t background-color: #ffffff;
\t padding: 0px;
}
.header {
\t padding: 0px;
\t \t display: -webkit-box;
\t display: -moz-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
}
.headcol1 {
\t background-color: #ffff00;
\t color: red;
\t height: 100px;
}
.headcol2 {
\t background-color: #ff0000;
\t color: white;
\t height: 100px;
}
.headcol3 {
\t background-color: #ff00ff;
\t height: 100px;
}
.content {
\t padding: 5px;
\t display: -webkit-box;
\t display: -moz-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
}
.contentcol1 {
\t background-color: #CCCCFF;
\t color: green;
\t height: 100px;
}
.contentcol2 {
\t background-color: #FFFFCC;
\t color: blue;
\t height: 100px;
}
.contentcol2_row0 {
\t outline: 1px solid red !important;
\t display: -webkit-box;
\t display: -moz-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
\t margin-bottom: 15px;
}
.contentcol2_row1 {
\t outline: 1px solid red !important;
\t \t display: -webkit-box;
\t display: -moz-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
\t margin-bottom: 15px;
}
.contentcol2_row2 {
\t outline: 1px solid red !important;
\t \t display: -webkit-box;
\t display: -moz-box;
\t display: -ms-flexbox;
\t display: -webkit-flex;
\t display: flex;
}
.contentcol2_row1_col1, .contentcol2_row2_col2 {
\t outline: 1px dotted blue;
}
.contentcol2_row1_col2, .contentcol2_row2_col1 {
\t outline: 1px solid green;
}
/* ------- VERTICAL MENU -------- */
ul#vertmenu {
font-size: 12px;
text-transform: uppercase;
margin: 0px;
padding: 0px;
list-style: outside none none;
}
ul#vertmenu li {
\t border-bottom: 1px solid #E5EAED;
\t background: transparent linear-gradient(#FFF, #F8F8F8) repeat scroll 0% 0%;
}
ul#vertmenu li.selected {
border-bottom: 1px solid #35B5F4;
}
ul#vertmenu li a {
background: transparent none repeat scroll 0px center;
display: block;
padding: 8px 0px;
color: #666;
font-weight: bold;
}
ul#vertmenu li a {
color: #666;
text-decoration: none;
}
ul#vertmenu li a:hover {
\t border-bottom: 1px solid #CC3300;
\t background: transparent linear-gradient(#FFF, #E69980) repeat scroll 0% 0%;
\t color: #7A1F00;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid layout test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/gridtest.css">
</head>
<body>
<div class="container">
\t <div class="header">
\t \t <div class="col-md-4 headcol1">Column 1 - Logo</div>
\t \t <div class="col-md-4 headcol2">Column 2 - Title</div>
\t \t <div class="col-md-4 headcol3">Column 3 - A form</div>
\t </div><!-- closes header div -->
\t <div class="content">
\t \t <div class="col-md-4 contentcol1">Content column 1 - Vertical nav</div>
\t \t <div class="col-md-8 contentcol2">Content column 2 containing nested rows. Each row contains two columns.
\t \t \t <div class="contentcol2_row0">
\t \t \t \t <div class="col-md-12"><img src="http://www.placehold.it/610x250" class="img-responsive"></div>
\t \t \t </div><!-- closes contentcol2_row0 div -->
\t \t \t <div class="contentcol2_row1">
\t \t \t \t <div class="contentcol2_row1_col1 col-md-8">This is Content column 2, row 1, column 1</div>
\t \t \t \t <div class="contentcol2_row1_col2 col-md-4"><img src="http://www.placehold.it/170x170" class="img-responsive"></div>
\t \t \t </div><!-- closes contentcol2_row1 div -->
\t \t \t <div class="contentcol2_row2">
\t \t \t \t <div class="contentcol2_row2_col1 col-md-4"><img src="http://www.placehold.it/170x170" class="img-responsive"></div>
\t \t \t \t <div class="contentcol2_row2_col2 col-md-8">This is Content column 2, row 2, column 2</div>
\t \t \t </div><!-- closes contentcol2_row2 div -->
\t \t </div><!-- closes contentcol2 div -->
\t </div><!-- closes content div -->
</div><!-- closes container div -->
</body>
</html>
Hi Abbas. Почему контейнер не «содержит» все строки? Цвет фона контейнера белый, и это останавливается после второй строки. Он не «содержит» вложенные строки. Почему это? – TerryAlly