col类的引导问题答案

【问题标题】：bootstrap issue with col classcol类的引导问题
【发布时间】：2016-10-13 18:37:20
【问题描述】：

大家好，我正在尝试编写一个网站，但我对 col 类有疑问，无论我使用什么，它都会占用我所有的屏幕宽度 col-md-4 或 col-md-6 或 col-md-3，我不知道'不知道我的屏幕分辨率的问题是 1024 × 768 还是这是什么问题

<!DOCTYPE html>

<html>
    <head>
       <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/style.css">
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        
    </head>
    <body>
		<nav class="navbar navbar-custom navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand">RTWM.Com</a>
				</div>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">About</a></li>
					<li><a href="#">Contact Us</a></li>
				
				</ul>
			</div>
		</nav>
		<header>
		
			<div class="text-center">
			
				<h1>RTWM FOR UNIFORMS</h1>
				<h3>Proud To Serve You</h3>
			</div>
		
		</header>
		<div class="container-fluid">
		
			<div class="col-md-12">
			
				<div class="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div>
			
			</div>
		
		</div>
    </body>
    
</html>

我还在学习和新手

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果我只是将bootstrap.css 添加到CDN 的id 中，实际上您的代码可以正常工作。 css/bootstrap.css 文件是否真的存在于您的本地文件夹中？

<!DOCTYPE html>

<html>
    <head>
       <title></title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
		<header>
		
			<div class="text-center">
			
				<h1>RTWM FOR UNIFORMS</h1>
				<h3>Proud To Serve You</h3>
			</div>
		
		</header>
		<div class="container-fluid">
		
			<div class="col-md-12">
			
				<div class="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div>
			
			</div>
		
		</div>
    </body>
    
</html>

（确保您点击了Full page 链接，因为.col-md-* 类仅在页面宽度超过 992 像素时才有效）

另请注意，通过引导 documentation 到网格系统：

行必须放置在 .container（固定宽度）或 .container-fluid（全宽）内，以便正确对齐和填充。

使用行来创建水平列组。

内容应放在列中，并且只有列可以是行的直接子级。

因此，您应该始终仅将列类放置为 .row 的直接子级。

所以，固定的代码是这样的：

<!DOCTYPE html>

<html>
    <head>
       <title></title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
		<header>
		
			<div class="text-center">
			
				<h1>RTWM FOR UNIFORMS</h1>
				<h3>Proud To Serve You</h3>
			</div>
		
		</header>
		<div class="container-fluid">
		
			<div class="row">
			<div class="col-md-12">
			
				<div class="row">
				<div class="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div>
				</div>
			
			</div>
			</div>
		
		</div>
    </body>
    
</html>

【讨论】：

ya 文件存在于我的本地文件夹中，但我会尝试 CDN，我也会尝试行问题是我的导师没有使用行课程，我只是跟着他，效果很好和他一起，但没有和我一起工作，我会试着告诉你发生了什么，谢谢你的帮助
我确实尝试使用 .row 作为列类的父级，但是当 .row 是 3 col-md-4 的父级并且 3 个子级在单独的行上相互向下时，我真的很困惑一定是我的电脑上的东西
您是否尝试在我的答案中单击代码 sn-p 中的 Run code snippet 按钮，然后单击 Full page 按钮？这是你预期的工作吗？如果是，但是当您从硬盘驱动器加载它时，相同的代码在您的 PC 上不起作用，那么我几乎可以肯定引导程序的 CSS 文件没有加载到您的页面上。检查链接标签等中的路径。
idid 尝试运行代码片段，然后是整页，它以全宽显示，甚至尝试过 CDN 引导，但仍然是全宽，你认为它来自我的电脑吗？因为我是这么认为的:(
然后尝试使用col-xs-* 类而不是col-md-*，以确保它不是您的显示器分辨率。如果您的屏幕宽度大于 750 像素，col-xs-6 应该可以工作。

【解决方案2】：

<!DOCTYPE html>

<html>
    <head>
       <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/style.css">
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
        
    </head>
    <body>
		<nav class="navbar navbar-custom navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand">RTWM.Com</a>
				</div>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">About</a></li>
					<li><a href="#">Contact Us</a></li>
				
				</ul>
			</div>
		</nav>
		<header>
		
			<div class="text-center">
			
				<h1>RTWM FOR UNIFORMS</h1>
				<h3>Proud To Serve You</h3>
			</div>
		
		</header>
		<div class="container-fluid">
		
			<div class="row">
			
				<div class="col-md-6">
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
				</div>
			
			</div>
		
		</div>
    </body>
    
</html>

【讨论】：

你应该把这个
改成这个
然后再添加一个 col-md-6 或者 (2) col-md -3。我当然希望这对您有所帮助。
我确实尝试了您的代码，但即使我添加了另一个 col-md-6 仍然有同样的问题，但它出现在下一行，即使没有行，唯一能与我合作的类是 col-ms我不知道 col-md 有什么问题