col側面上不需要的白色y軸空間-bootstrap CSS
[英]Unwanted white y-axis space on side of col - bootstrap css
問題描述
我的“ col”旁邊有空白。
我不要這個 我希望#first和#second完美地將頁面划分為50/50，沒有奇怪的填充拋出y軸。
我以為2 class =“ col”可以為我做到這一點，但這真是令人難以置信。 有一個更好的方法嗎？
#banner { width: 100%; height: 328px; background: url(img/banner_background.jpg) repeat center fixed; position: relative; padding-top: 25px; overflow: hidden; } .flex-container { display: flex; justify-content: center; } #menubutton { position: absolute; top: 80px; right: 20px; background: url(img/menubutton.jpg) no-repeat center ; height:68px; width:68px; display: block; } #menubutton:hover { position: absolute; top: 80px; right: 20px; background: url(img/menuup.jpg) no-repeat center ; height:68px; width:68px; display: block; } #biglogo { position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 2s; } @keyframes example { 0% {margin-top: 200px;} 100% {margin-top: 0px;} } #work { width: 100%; height: 94px; background-color: #3de1ff; padding-top: 10px; } #work a { margin-left: 100px; } #logoscrolls { width: 100%; } /* The Overlay (background) */ .overlay { /* Height & width depends on how you want to reveal the overlay (see JS below) */ height: 0%; width: 100%; position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; background-color: rgb(0,0,0); /* Black fallback color */ background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ overflow-y: hidden; /* Disable horizontal scroll */ transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ } /* Position the content inside the overlay */ .overlay-content { position: relative; top: 25%; /* 25% from the top */ width: 100%; /* 100% width */ text-align: center; /* Centered text/links */ margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ } /* The navigation links inside the overlay */ .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; /* Display block instead of inline */ transition: 0.3s; /* Transition effects on hover (color) */ } /* When you mouse over the navigation links, change their color */ .overlay a:hover, .overlay a:focus { color: #f1f1f1; } /* Position the close button (top right corner) */ .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } #first { height: 527px; background: url(img/gbackground.jpg) no-repeat; background-size: cover; justify-content: center; align-items: center; display: flex; font: normal normal 30px/50px Times, serif; flex-direction: column; } #second { border: 1px solid red; }
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <meta name="description" content=""> <meta name="keywords" content=""> <!-- START Google Analytics --> <!-- END Google Analytics --> <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <section class="flex-container" id="banner"> <a href="#" id="biglogo"><img class="img-fluid" src="img/logo.png" alt="Digital Marketing - 2Teso" height="282px" width="282px"></a> <a href="#" id="menubutton" onclick="openNav()"></a> <!-- The overlay --> <div id="myNav" class="overlay"> <!-- Button to close the overlay navigation --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <!-- Overlay content --> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> </section> <section id="work"> <marquee id="logoscrolls" behavior="scroll" direction="left"> <a href="#" id="spalogo"><img src="img/spalogo.png" alt="Shangrila Massage Spa" height="72px" width="116px"></a> <a href="#" id="minilogo"><img src="img/minilogo.png" alt="2Teso Mini Logo" height="72px" width="73px"></a> </marquee> </section> <div class="fluid-container"> <div class="row"> <!-- I want to put a span around "View Our Services, but it ruins the flexbox, I want the "View Our services" centered below the top 3 words: "Your Business Online" and with some space on the left, I added some whitespace as a ghetto hack, but how can I add spans so I can do extra cool things and not disrupt the flex? I also tried adding a underline to the "--> <div id="first" class="col"><span>Your Business Online</span><span>View Our Services</span></div> <div id="second"class="col"></div> </div> </div> <script> function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; } </script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>
有什么辦法可以將#first #second划分為一半的頁面，而y軸上沒有空格。
1 個解決方案
解決方案1
0 2018-09-29 09:58:26
您可以通過將以下屬性添加到.css文件中來實現此目的：
.row {
width: 100vw;
box-sizing: border-box;
}
希望這對你有用！
div 定位（y 軸）與之前的 div y 軸 position 相同，不需要的行為
[英]Div positioning (y-axis) is the same as previous div y-axis position, unwanted behavior
CSS：拉伸 div 以適應寬度，僅當它們在彼此的 y 軸空間內時
[英]CSS: Stretch divs to fit width, ONLY IF they are within each other's y-axis space
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.