如何使用bootstrap使我的网站响应？ img-responsive / columns not working

Question

I've used bootstrap columns and the 'img-responsive' class but my page still isn't responsive. The only bit which is working is the bxslider .

I did try to make my menu with boostrap columns but they wouldn't align correctly so I went for <ul> instead. I'm not sure if there's a way of making this repsonsive?

My code is here: 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> 

Answer 1

You forgot the actual CSS Script for Bootstrap, friend.

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

Enter it under your Meta.

Answer 2

I did the best I could to get closer to a solution, but for some reason in my tests, your CSS isn't being referenced to a way I can see the layout - however, try this:

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;
}