0
C'est la deuxième fois que j'utilise Bootstrap dans un projet. Je ne suis pas sûr de ce qui cause que ma page ne soit pas correctement adaptée. Lors du redimensionnement du contenu du port d'affichage, les conteneurs sont supprimés. Je crois qu'il est causé par une mauvaise utilisation des classes Colstraps * et Rowstrap. Voici le code HTML et CSS.Besoin d'aide pour le débogage de la réactivité Bootstrap. Impossible de mettre le contenu à l'échelle correctement
EDIT: Je suis récemment allé creux et refactorisé une partie du code et a constaté que je n'ai pas mis des lignes à l'intérieur des colonnes correctement.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
top: -215px;
position: relative;
max-width: 96.7vw;
height: 200px;
left: 30px;
top: -340px;
padding-bottom: 50px;
}
a {
color: #ffffff;
}
.search-text {
padding-left: 10px;
float: right;
}
.glyphicon-search {
padding-top: 10px;
padding-left: 30px;
color: black;
}
.search-bar-container {
padding-top: 10px;
background-color: red;
top: -390px;
max-width: 96.7vw;
height: 70px;
left: 31px;
}
.row-eq-height>[class*='col-'] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 50px;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
.translucent>div {
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ffffff;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="#home">HOME</a>
</li>
<li class="nav-item">
<a href="#showroom">SHOWROOM</a>
</li>
<li class="nav-item">
<a href="#services">SERVICES</a>
</li>
<li class="nav-item">
\t <a href="#info">INFO</a>
</li>
<li class="nav-item">
\t <a href="#photos">PHOTO GALLERY</a>
</li>
<li class="nav-item">
\t <a href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
</div>
<div class="row row-eq-height translucent">
<div class="col-lg-3 col-xs-12 box-color"><a href="#">NEW <br>INVENTORY</a></div>
<div class="col-lg-3 col-xs-12 box-color"><a href="#">PRE OWNED <br>INVENTORY</a></div>
<div class="col-lg-3 col-xs-12 box-color"><a href="#">CUSTOMER <br>FABRICATION</a></div>
<div class="col-lg-3 col-xs-12 box-color"><a href="#">SERVICE <br>DEPARTMENT</a></div>
</div>
<div class="row">
\t <div class="col-xs-12 search-bar-container">
\t \t
\t \t <form class="form-inline">
\t \t \t <div class="form-group">
\t \t \t \t <label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
\t \t \t \t <input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
\t \t \t \t
\t \t \t </div>
\t \t \t
\t \t </form>
\t \t
\t </div>
\t
</div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
vous n'avez pas besoin d'écrire ce css supplémentaire, il est déjà dans Bootstrap ajouter class = "img-responsive" à l'intérieur du![]()
mlegg
It still has the same behavior. It didn't fix the problem I'm having. When I resize the screen the 4 div boxes, the search bar, and the nav items do not act responsive. What Bootstrap classes am I not using correctly? I'm sure it's something like some of the classes are in the wrong spots or something but I can't figure it out. –