col 类的引导问题

问题描述 投票：0回答：2

我正在尝试编写一个网站，但我对 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
2个回答
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 像素时才起作用）

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

  • 行必须放置在 .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>

0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.