如何使用bootstrap使我的網站響應？ img-responsive / columns not working

Question

我已經使用了bootstrap列和'img-responsive'類，但我的頁面仍然沒有響應。 唯一有效的是bxslider 。

我確實嘗試用boostrap列制作我的菜單但是它們不能正確對齊所以我去了<ul> 。 我不確定是否有辦法讓這種反復的方式？

我的代碼在這里： https ： //codepen.io/harrietorkney/pen/jqeYbP

要么：

  #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

朋友，你忘記了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下輸入。

Answer 2

我盡我所能來接近解決方案，但由於某些原因，在我的測試中，你的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;
}