0
メニューレイアウト（以下のデザインレイアウト）を作成しようとしていますが、中から要素を取り除く際に問題があります。私はブートストラップ3.3.7を使用しています。この問題は、デスクトップでのみ発生し、モバイルでは発生しません。私は1つの "menubox"（基本的に1つの皿）を作って、それぞれが4つのコラムをとって全体を2つコピーしました。右のものは上に重なるものが少し残っており、それらは3の中心にはありません。問題のイメージが含まれています。私は、これはその後、あなたの最終的なコードを送って適用します ためブートストラップを使用して異なる列に要素をオーバーラップする
@charset "UTF-8";
* {
margin: 0;
}
html body {
height: 100%;
}
.nopadding {
padding: 0;
}
.navbar {
background-color: #ff8300;
border-radius: 0 0 10px 10px;
border: 0;
height: 100px;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.navspace {
right: 50px;
margin-top: 25px;
position: relative;
font-size: 18px;
color: #fff;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
.thumbnails {
position: relative;
margin-top: 150px;
}
#myCarousel {
width: 980px;
max-width: 100%;
height: 654px;
bottom: 25px;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
border-radius: 0 0 10px 10px;
}
.banner {
background: url(../images/banner1.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner2 {
background: url(../images/banner2.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner3 {
background: url(../images/banner3.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner p {
position: relative;
font-size: 25px;
color: #fff;
top: 440px;
left: 20px;
}
.banner h1 {
position: relative;
font-size: 50px;
color: #fff;
left: 20px;
top: 420px;
}
.bodyimg {
max-width: 100%;
}
.bodytext1 {
color: #ff8300;
}
.bodytext2 {
color: #ff8300;
width: 160px;
margin-top: 37px;
}
.bodytext3 {
color: #ff8300;
margin-top: 60px
}
.bodytext4 {
color: #ff8300;
margin-top: 60px
}
.socialpadding {
padding: 0px 10px 0px 10px;
position: relative;
}
.centersocial {
margin: 0 auto;
text-align: center;
position: absolute;
}
.contactinfo {
color: #ff8300;
margin: 200px 0px 0px auto;
}
/* Add a background color and some padding around the form */
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 400px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
.formlabel {
color: #fff;
}
#inputMessage {
height: 200px;
}
.btn {
background-color: #fcb972;
border-color: #ff9300;
margin-top: 20px;
}
.btn:hover {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.btn:onclick {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.messageform {
height: 50px;
}
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.formarea2 {
background-color: #fff;
border-radius: 10px;
width: 400px;
height: 50px;
margin: 50px auto 0px auto;
padding: 15px;
display: inline;
text-align: center;
}
#inputPostal {
display: inline-block;
width: 30%;
margin-left:3%;
}
.formpostal {
color: #ff8300;
font-size: 30px;
display: inline-block;
}
.menubg {
background-color: #ff8300;
height: 100%;
width: 100%;
max-width: 980px;
border-radius: 10px;
margin: 125px;
}
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.cartbtn {
margin-top: 20px;
position: relative;
left: 96%;
}
h2 {
font-size: 24px;
color: #fff;
text-align: center;
margin-top: 30px;
}
.menubox {
background-color: #fff;
border-radius: 10px;
width: 321px;
height: 320px;
margin-top: 30px;
position: relative;
}
.menubox a {
text-decoration: none;
}
.item1 {
background: url(../images/menu1.jpg) no-repeat center;
border-radius: 10px 10px 0px 0px;
}
.menubox img {
border-radius: 10px 10px 0px 0px;
opacity: 0;
transition: .5s ease;
backface-visibility: hidden;
}
.menubox:hover .item1 {
opacity: 0.7;
transition: .5s ease;
}
.menubox:hover img {
opacity: 1;
transition: .5s ease;
}
h3 {
font-size: 16;
color: #ff8300;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 10px 10px 0 0;
height: 50px;
margin: 150px auto 0 auto;
position: absolute;
width: 100%;
max-width: 980px;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
footer {
position: relative;
color: #fff;
text-align: right;
margin-top: 30px;
font-size: 10px;
width: 100%;
max-width: 980px;
}
@media only screen and (max-width: 992px) {
.navbar {
background-image: none;
background-color: #ff8300;
width: 100%;
border-radius: 0px;
margin: 0;
}
.navspace {
padding: 0px 20px 0px 0px;
left: 120px;
top: 30px;
}
.navbar-collapse {
background: rgba(255, 255, 255, 0.75);
height: 300px;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 0;
overflow: hidden;
}
footer {
position: relative;
color: #fff;
display: block;
text-align: right;
font-size: 10px;
}
.contactinfo {
margin: 40px auto 0px auto;
text-align: center;
}
}
@media only screen and (max-width: 767px) {
#myCarousel.carousel {
max-width: 100%;
width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
}
.findus {
margin: 0 auto;
}
.centersocial {
position: relative;
}
.bodytext4 {
text-align: center;
width: 250px;
margin: 100px auto 5px auto;
}
.bodytext3 {
text-align: center;
width: 250px;
margin: 60px auto 5px auto;
}
}
@media only screen and (max-width: 576px) {
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 350px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* additional */
.row, #myCarousel, .container {
max-width: 100%;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Peperoni Pizzeria</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-static-top rounded-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navspace" href="index.html">Home</a></li>
<li><a class="navspace" href="menu.html">Menu</a></li>
<li><a class="navspace" href="location.html">Locations</a></li>
<li><a class="navspace" href="contactus.html">Contact Us</a></li>
<!-- Put here your menu items -->
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<div class="formarea2">
<form>
<div class="form-group">
<label class="formpostal" for="inputPostal">Input Postal Code:</label>
<input type="postal" class="form-control" id="inputPostal" placeholder="i.e 450894">
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 menubg col-centered">
<div class="row">
<div class="col-sm-12">
<a href="#"><img class="cartbtn" src="images/cart.png" alt="cart"></a>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2>Appetisers/Sides</h2>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-4">
<div class="menubox">
<a href="#">
<div class="item1">
<img href="#" src="images/addtocart.png" alt="">
</div>
<h3> Rucola Salad $10</h3>
</a>
</div>
</div>
<div class="col-sm-4">
<div class="menubox">
<a href="#">
<div class="item1">
<img href="#" src="images/addtocart.png" alt="">
</div>
<h3> Rucola Salad $10</h3>
</a>
</div>
</div>
<div class="col-sm-4">
<div class="menubox">
<a href="#">
<div class="item1">
<img href="#" src="images/addtocart.png" alt="">
</div>
<h3> Rucola Salad $10</h3>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 foot img-responsive">
<footer class="navbar-fixed-bottom">
Copyright © 2017 Peperoni Pizzeria. All Rights Reserved.
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.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>
あなたの '.menubox'要素はあなたのCSSに' 321px'の固定幅 'width'を持っています。そのパーセンテージをベースにする必要があります。 –
うわー、ありがとう！そのような単純な修正と愚かな間違い！ –