html - 建议需要修复 flex/bootstrap prob

我以为我正在理解 Bootstrap 和 Flex，但它突然开始做一些奇怪的事情，我无法弄清楚哪里出了问题。我遇到的问题是:

容器没有移动到其内容的长度。它拒绝超过 210px 的高度。我没有在任何地方写下那个长度。
在调整屏幕大小时，顶行中的三列不会以保持 100% 宽度的方式调整大小。他们只是径直向左走，挤在那里，好像他们在恐惧中畏缩一样!
在第二行，我有两列。右手栏包含顽固地拒绝调整大小的图像，尽管我使用的是 img-responsive 类......但左手栏确实调整大小但实际上压缩到无法忍受的微小不可读宽度

下面是我的 HTML 和 CSS 代码。

非常感谢任何帮助。

谢谢特里

body {
  background-color: #B09D32;
}

.container {
	max-width: 970px;
	height: 100%;
	background-color: #ffffff;
	padding: 0px;
}

.header {
	padding: 0px;
		display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.headcol1 {
	background-color: #ffff00;
	color: red;
	height: 100px;
}

.headcol2 {
	background-color: #ff0000;
	color: white;
	height: 100px;
}

.headcol3 {
	background-color: #ff00ff;
	height: 100px;
}

.content {
	padding: 5px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.contentcol1 {
	background-color: #CCCCFF;
	color: green;
	height: 100px;
}

.contentcol2 {
	background-color: #FFFFCC;
	color: blue;
	height: 100px;
}

.contentcol2_row0 {
	outline: 1px solid red !important;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin-bottom: 15px;
}
.contentcol2_row1 {
	outline: 1px solid red !important;
		display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin-bottom: 15px;
}

.contentcol2_row2 {
	outline: 1px solid red !important;
		display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}
.contentcol2_row1_col1, .contentcol2_row2_col2 {
	outline: 1px dotted blue;
}

.contentcol2_row1_col2, .contentcol2_row2_col1 {
	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 {
	border-bottom: 1px solid #E5EAED;
	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 {
	border-bottom: 1px solid #CC3300;
	background: transparent linear-gradient(#FFF, #E69980) repeat scroll 0% 0%;
	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">
	<div class="header">
		<div class="col-md-4 headcol1">Column 1 - Logo</div>
		<div class="col-md-4 headcol2">Column 2 - Title</div>
		<div class="col-md-4 headcol3">Column 3 - A form</div>
	</div><!-- closes header div -->

	<div class="content">
		<div class="col-md-4 contentcol1">Content column 1 - Vertical nav</div>
		<div class="col-md-8 contentcol2">Content column 2 containing nested rows. Each row contains two columns.
			<div class="contentcol2_row0">
				<div class="col-md-12"><img src="http://www.placehold.it/610x250" class="img-responsive"></div>
			</div><!-- closes contentcol2_row0 div -->
			<div class="contentcol2_row1">
				<div class="contentcol2_row1_col1 col-md-8">This is Content column 2, row 1, column 1</div>
				<div class="contentcol2_row1_col2 col-md-4"><img src="http://www.placehold.it/170x170" class="img-responsive"></div>
			</div><!-- closes contentcol2_row1 div -->
			<div class="contentcol2_row2">
				<div class="contentcol2_row2_col1 col-md-4"><img src="http://www.placehold.it/170x170" class="img-responsive"></div>
				<div class="contentcol2_row2_col2 col-md-8">This is Content column 2, row 2, column 2</div>
			</div><!-- closes contentcol2_row2 div -->

		</div><!-- closes contentcol2 div -->
	</div><!-- closes content div -->
</div><!-- closes container div -->

</body>

</html>

最佳答案

我在 <body> 中做了一些修改标签。基本上取代了content , header和 contentcol2_row类到 row .

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 headcol1">Column 1 - Logo</div>
        <div class="col-md-4 headcol2">Column 2 - Title</div>
        <div class="col-md-4 headcol3">Column 3 - A form</div>
    </div><!-- closes header div -->

    <div class="row">
        <div class="col-md-4 contentcol1">Content column 1 - Vertical nav</div>
        <div class="col-md-8 contentcol2">Content column 2 containing nested rows. Each row contains two columns.
            <div class="row">
                <div class="col-md-12"><img src="http://www.placehold.it/610x250" class="img-responsive"></div>
            </div><!-- closes contentcol2_row0 div -->
            <div class="row">
                <div class="contentcol2_row1_col1 col-md-8">This is Content column 2, row 1, column 1</div>
                <div class="contentcol2_row1_col2 col-md-4"><img src="http://www.placehold.it/170x170" class="img-responsive"></div>
            </div><!-- closes contentcol2_row1 div -->
            <div class="row">
                <div class="contentcol2_row2_col1 col-md-4"><img src="http://www.placehold.it/170x170" class="img-responsive"></div>
                <div class="contentcol2_row2_col2 col-md-8">This is Content column 2, row 2, column 2</div>
            </div><!-- closes contentcol2_row2 div -->

        </div><!-- closes contentcol2 div -->
    </div><!-- closes content div -->
</div><!-- closes container div -->

</body>

关于html - 建议需要修复 flex/bootstrap prob，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33014336/

html - 建议需要修复 flex/bootstrap prob

上一篇：Jquery Card Game first-child 和克隆错误

下一篇：html - Contact Form 7 - 复选框自定义/程式化