Question

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

容器未移动到其内容的长度。它拒绝超过210px的高度。我不会在任何地方写这么长的。
在调整屏幕大小时，顶行中的三列不会以保持100％宽度的方式调整大小。他们只是直奔左边并在那里挤压，好像他们在恐惧中畏缩一样！
在第二行，我有两列。右手栏中包含的图像虽然我使用的是img-responsive类，却顽固地拒绝调整大小...但是左手栏确实调整了大小，但实际上却陷入了难以忍受的微小难以理解的宽度

以下是我的HTML和CSS代码。

非常感谢任何帮助。

由于特里

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

建议需要修复flex / bootstrap问题

1 个答案: