我已经使用了自举列和“img-responsive”＃39;上课，但我的页面仍然没有响应。唯一有效的是bxslider。
我确实尝试使用boostrap列制作菜单，但它们无法正确对齐，所以我转而使用<ul>。我不确定是否有办法让这种反复使用？
我的代码在这里：https://codepen.io/harrietorkney/pen/jqeYbP
OR：
#index {
background-color: rgb(150, 175, 149);
border-radius: 10px;
}
#navbar {
list-style-type: none;
margin-left: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
#navbar li {
display: inline;
width: 60px;
padding-top: 20px;
font-family: 'Lato Ultra-Bold', sans-serif;
font-color: rgb(10, 72, 63);
font-size: 15px;
padding: 20px;
font-weight: bold;
}
a {
color: rgb(10, 72, 63);
}
.container {
background-color: rgb(255, 255, 225);
}
.btn {
margin-right: 20px;
}
.navbar-text > a {
background-color: rgb(255, 255, 225);
}
#andy {
margin-top: 20px;
border: 5px solid rgb(10, 72, 63);
border-radius: 25px;
}
.header {
width: 1170px;
height: 120px;
background-color: rgb(255, 255, 225);
background: linear-gradient(left, rgba (10, 72, 63, .2), rgba (10, 72, 63, 1));
background: -webkit-linear-gradient(left, rgba(10, 72, 63, 0), rgba(10, 72, 63, 1));
background: -moz-linear-gradient(left, rgba(10, 72, 63, .2), rgba(10, 72, 63, 1));
}
.row {
padding-left: -30px;
}
.row-1 {
border-top: 5px solid rgb (10, 72, 63);
margin-bottom: 10px;
}
.row-1 p {
font-family: 'Lato', sans-serif;
color: rgb(10, 72, 63);
}
.row-2 {
border-top: 10px solid rgb(10, 72, 63);
}
.bxslider {
align-content: center;
background-size: cover;
position: relative;
padding: 1px
}
.mainbody {
width: 1020px;
padding-left: 100px;
}
.col-md-9 {
padding-left: 60px;
margin-bottom: 60px;
}
#footer {
height: 100px;
}
h1 {
font-family: 'Lato', sans-serif;
color: rgb(255, 255, 225);
text-align: right;
margin-right: 20px;
font-size: 33px;
}
p {
padding-top: 20px;
text-align: left;
font-family: 'Lato', sans-serif;
color: rgb(10, 72, 63);
font-size: 15px;
}
body {
background-color: rgb(10, 72, 63);
}<link rel='stylesheet' type='text/css' href="mediaqueries.css">
<link href='dist/css/bootstrap.css' rel='stylesheet'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" type="text/css" href="index.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src='./jquery/jquery.bxslider.min.js'></script>
<link href='./jquery/jquery.bxslider.css' rel='stylesheet' />
<div class='container'>
<div class='header'>
<div class='row'>
<div class='col-xs-4'>
<img class='img-responsive' src='./images/scaled/logo1.png'>
</div>
<div class='col-xs-8'>
<h1> tel: 01969 623001 </h1>
<div class="navbar-text pull-right">
<a class="btn btn-social-icon btn-facebook" href='https://www.facebook.com/orkneyopticians/?fref=ts'>
<span class="fa fa-facebook"></span>
</a>
</div>
</div>
</div>
</div>
<ul id='navbar'>
<li id='index'> <a href='index.html'> HOME </a>
</li>
<li> <a href='aboutus.html'> ABOUT US </a>
</li>
<li><a href='eyecare.html'> EYECARE </a>
</li>
<li><a href='eyewear.html'> EYEWEAR </a>
</li>
<li><a href='lenses.html'> LENSES </a>
</li>
<li><a href='contactlenses.html'> CONTACT LENSES </a>
</li>
<li><a href='newsandoffers.html'> NEWS AND OFFERS </a>
</li>
<li><a href='contact.html'>CONTACT</a>
</li>
</ul>
<ul class='bxslider'>
<li>
<img src='./images/scaled/teamfrontofpractice2.jpg'>
</li>
<li>
<img src='./images/scaled/insideofpractice.jpg'>
</li>
<li>
<img src='./images/scaled/frontofpractice.jpg'>
</li>
</ul>
<div class='mainbody'>
<div class='row-2'>
<div class='col-md-3'>
<img id='andy' src='./images/scaled/andycropped.jpg'>
</div>
<div class='col-md-9'>
<p>Welcome to our website. Excellence in eyecare and eyewear has been a consistent theme at Orkney Opticians for the last 25 years.</p>
<p>Clear corrected vision and healthy, comfortable eyes at all times is important for all of us and so we give you comprehensive advice on all aspects of your ocular health. We want you to look stylish which is why we offer you a carefully selected
range of modern and traditional eyewear from high quality frames and lenses as well as more affordable spectacles for those on a limited budget. If you prefer contact lenses we have an extensive range available and stock a large number of trial
lenses.
<p>Whatever your needs are, the skill and helpfulness of our staff and our comprehensive service will inspire you.
<p>Our business hours are Monday to Friday, 9am until 5pm with a late night opening until 7pm on Tuesdays. Enjoy looking at our website. We hope to have the pleasure of seeing you soon.</p>
</div>
</div>
</div>
</div>
<div id='footer'>
</div>
</div>
<script>
$(document).ready(function() {
$('.bxslider').bxSlider({
slideWidth: 1020,
auto: true,
autoControls: true,
});
});
</script>
答案 0 :(得分：0)
你忘记了Bootstrap的实际CSS脚本，朋友。
<!-- Bootstrap and jQuery -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
在Meta下输入。
答案 1 :(得分：0)
我尽我所能来接近解决方案，但由于某些原因，在我的测试中，你的CSS并没有引用我可以看到布局的方式 - 但是，试试这个：
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/index.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="index">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Website</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a> </li>
<li><a href="eyecare.html">EYECARE</a></li>
<li><a href="eyewear.html">EYEWEAR</a></li>
<li><a href="lenses.html">LENSES</a></li>
<li><a href="contactlenses.html">CONTACT LENSES</a></li>
<li><a href="newsandoffers.html">NEWS AND OFFERS</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="header">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/140x100" alt="logo">
</div>
<div class="col-md-6">
<h1>
<a href="#"><button class="btn btn-default"><span class="fa fa-phone"></span></button></a>
<a href="#"><button class="btn btn-default"><span class="fa fa-envelope"></span></button></a>
<a href="#"><button class="btn btn-default"><span class="fa fa-facebook"></span></button></a>
<a href="#"><button class="btn btn-default"><span class="fa fa-twitter"></span></button></a>
</h1>
</div>
</div>
</div>
<div class="bxslider" align="middle">
<img src="http://placehold.it/140x100">
<img src="http://placehold.it/140x100">
<img src="http://placehold.it/140x100">
</div>
<br />
<div class="mainbody">
<div class="row-2">
<div class="col-md-3">
<img src="http://placehold.it/140x100">
</div>
<div class="col-md-9">
<p> Welcome to our website. Excellence in eyecare and eyewear has been a consistent theme at Orkney Opticians for the last 25 years. </p>
<p> Clear corrected vision and healthy, comfortable eyes at all times is important for all of us and so we give you comprehensive advice on all aspects of your ocular health. We want you to look stylish which is why we offer you a carefully selected range of modern and traditional eyewear from high-quality frames and lenses as well as more affordable spectacles for those on a limited budget. If you prefer contact lenses we have an extensive range available and stock a large number of trial lenses.
<p>Whatever your needs are, the skill and helpfulness of our staff and our comprehensive service will inspire you.
<p> Our business hours are Monday to Friday, 9am until 5pm with a late night opening until 7pm on Tuesdays. Enjoy looking at our website. We hope to have the pleasure of seeing you soon.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="col-md-12" align="center">
<h2>Copyright Information</h2>
</div>
</div>
</body>
</html>
CSS
#index{
background-color: rgb(150,175,149);
border-radius: 10px;
}
#navbar {
list-style-type: none;
margin-left: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
#navbar li {
display:inline;
width: 60px;
padding-top: 20px;
font-family: 'Lato Ultra-Bold', sans-serif;
font-color: rgb(10,72,63);
font-size: 15px;
padding: 20px;
font-weight:bold;
}
a {
color: rgb(10,72,63);
}
.container {
background-color: rgb(255,255,225);
}
.btn {
margin-right: 20px;
}
.navbar-text > a {
background-color: rgb(255,255,225);
}
#andy {
margin-top: 20px;
border: 5px solid rgb(10,72,63);
border-radius: 25px;
}
.header {
width: 1170px;
height:120px;
background-color: rgb(255,255,225) ;
background:linear-gradient(left, rgba (10,72,63,.2), rgba (10,72,63,1));
background:-webkit-linear-gradient(left, rgba(10,72,63,0), rgba(10,72,63,1));
background:-moz-linear-gradient(left,rgba(10,72,63,.2), rgba(10,72,63,1));
}
.row {
padding-left: -30px;
}
.row-1 {
border-top: 5px solid rgb (10,72,63);
margin-bottom: 10px;
}
.row-1 p {
font-family:'Lato', sans-serif;
color: rgb(10,72,63);
}
.row-2{
border-top: 10px solid rgb(10,72,63);
}
.bxslider {
align-content: center;
background-size: cover;
position:relative;
padding: 1px
}
.mainbody {
width: 1020px;
padding-left: 100px;
}
.col-md-9 {
padding-left: 60px;
margin-bottom: 60px;
}
#footer {
height: 100px;
}
h1 {
font-family: 'Lato', sans-serif;
color: rgb(255,255,225);
text-align: right;
margin-right: 20px;
font-size: 33px;
}
p {
padding-top: 20px;
text-align: left;
font-family: 'Lato', sans-serif;
color: rgb(10,72,63);
font-size: 15px;
}
#body {
background-color: rgb(10,72,63);
padding-top: 70px;
}