我是编程新手。
我试图让三个col-md-4具有相同的宽度。我假设如果在HTML中正确引用Bootstrap，则不需要CSS。任何建议将不胜感激。
/*NAV LOGO*/
.logo {
text-decoration: none;
color: black;
}
.logo img {
margin-left: auto;
margin-right: auto;
display: block;
}
/*NAV MENU*/
.menu {
text-align: center;
}
.menu ul li {
display: inline-block;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
}
.menu ul li a:link {
text-decoration: none;
background: white;
color: black;
border: 1px solid black;
padding-left: 18px;
padding-right: 18px;
padding-top: 10px;
padding-bottom: 10px
margin-top: 10px;
text-align: center;
}
.menu ul li a:hover {
background: blue;
color: white;
}
/*SUPPORTING*/
/*FOOTER*/
.footer ul li {
color: white;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
}
.footer .container {
text-align: center;
background: black;
height: 100px;
}
.footer ul li a:link {
color: white;
text-decoration: none;
}
.footer p {
color: white;
margin-top: 0px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>WASTEdar | Waste Management and Recycling in Dar es Salaam, Tanzania</title>
</head>
<body>
<!--NAV-->
<div class="nav">
<div class="container">
<div class="logo">
<img src="http://static1.squarespace.com/static/53e6b408e4b0cc1fd4cb6a46/54d8bc16e4b050b6c2864e96/54db5b74e4b00d17d9bb0442/1423661993508/wastedar_logos+(1)-page-001.jpg" style="width:505px; height:85px;" align="center"/>
<p align="center"><strong>Waste Management and Recycling in Dar es Salaam, Tanzania</strong></p>
</div>
<div class="menu">
<div class="center">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Programmes</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--SUPPORTING-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Our Vision</h1>
<p>We the only NGO operational in Dar es Salaam <br> addressing issues concerning waste management and recycling</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<div class="container">
<ul class="footer">
<li><a href="#">Home</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Programmes</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
</ul>
<p align="center">Copyright Joshua Palfreman</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您需要添加 bootstrap.css 以及 bootstrap.js ，我添加了col-xs-4，以便您可以看到这些列具有相同的宽度小屏幕这样的片段。
/*NAV LOGO*/
.logo {
text-decoration: none;
color: black;
}
.logo img {
margin-left: auto;
margin-right: auto;
display: block;
}
/*NAV MENU*/
.menu {
text-align: center;
}
.menu ul li {
display: inline-block;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
}
.menu ul li a:link {
text-decoration: none;
background: white;
color: black;
border: 1px solid black;
padding-left: 18px;
padding-right: 18px;
padding-top: 10px;
padding-bottom: 10px margin-top: 10px;
text-align: center;
}
.menu ul li a:hover {
background: blue;
color: white;
}
/*SUPPORTING*/
/*FOOTER*/
.footer ul li {
color: white;
list-style-type: none;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
}
.footer .container {
text-align: center;
background: black;
height: 100px;
}
.footer ul li a:link {
color: white;
text-decoration: none;
}
.footer p {
color: white;
margin-top: 0px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--NAV-->
<div class="nav">
<div class="container">
<div class="logo">
<img src="http://static1.squarespace.com/static/53e6b408e4b0cc1fd4cb6a46/54d8bc16e4b050b6c2864e96/54db5b74e4b00d17d9bb0442/1423661993508/wastedar_logos+(1)-page-001.jpg" style="width:505px; height:85px;" align="center" />
<p align="center"><strong>Waste Management and Recycling in Dar es Salaam, Tanzania</strong>
</p>
</div>
<div class="menu">
<div class="center">
<ul class="nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">Our Story</a>
</li>
<li><a href="#">Programmes</a>
</li>
<li><a href="#">Resources</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--SUPPORTING-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4">
<h1>Our Vision</h1>
<p>We the only NGO operational in Dar es Salaam
<br>addressing issues concerning waste management and recycling</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-xs-4 col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
<div class="col-xs-4 col-md-4">
<h1>Our Mission</h1>
<p>To clean up Dar es Salaam, Tanzania</p>
<button type="button" class="btn-btn-default">Learn More</button>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<div class="container">
<ul class="footer">
<li><a href="#">Home</a>
</li>
<li><a href="#">Our Story</a>
</li>
<li><a href="#">Programmes</a>
</li>
<li><a href="#">Resources</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
<p align="center">Copyright Joshua Palfreman</p>
</div>
</div>