Question

大家好我正在尝试编写一个网站，我对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>

我还在学习和新手

Answer 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像素时有效

另请注意，通过bootstrap 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>

Answer 2

＆＃13;

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

＆＃13;

col class

2 个答案: