个人中心
gpt4 book ai didi

html - Bootstrap 4 全屏桌面 - 列填充剩余空间

转载 作者：行者123 更新时间：2023-11-28 00:18:53 24 4
gpt4 key购买 nike

我正在尝试使用 bootstrap 4 制作全屏布局，如下所示: 100% height and width

我的问题是左右栏(在导航和页脚之间)没有占用剩余空间。其次，我需要将列中的内容居中。我尝试过为这些部分提供 (90vh) 的固定高度，但后来我正在为移动设备/平板电脑编写大量解决方法代码。有没有我遗漏的解决方案，可能是非常明显的解决方案!

感谢任何帮助，谢谢!

body {
	font-family: 'Montserrat', sans-serif;
	background-color: #fcfcfc;
}


.navbar-colored{
    background-color: rgba(255,255,255,0.9) !important; /*#94a7b7*/
    box-shadow: 1px 1px 10px rgba(0,0,0,0.15);
    opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 1.0s;
}
.nav-item {
    opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-duration: 1.1s;
}


@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.nav-item a {

color: rgba(17,17,17,0.85);

}

.cart-icon {
	
	padding-right: .75rem;
}

.cart-icon strong {
	border-radius: 0;
    font-weight: bold;
    margin: .3em 0;
    border: 2px solid #446084; 
    color: #0062A8;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 1em;
}

.navbar{
  position:fixed;
  width:100%;
  background color: transparent;
  z-index:10;
  flex-wrap: nowrap;
  padding: 0.8rem 1.0rem;
}

.navbar-light .navbar-toggler {
	border:none;
}


.row .no-pad {
	margin-left: 0px;
}
.color-img-col {
	padding-left: 20px;
	padding-right: 20px;
}
.col-right {
	background-color: #e6e6e6;
	padding-left: 4%;
    padding-right: 4%;
}
.col-left {
	background-color: #fcfcfc;

}


.col-lg-4 .steps-small li {
    padding-top: 10px;
}

.builder-color-img {
	max-width: 80%;
}
.left-content {
	margin-left: 9vw;
    width: 72%;
}

[data-attribute-link] {
    cursor: pointer;
    }

 

.builder-checkout {
	background-color: #0062a86b /*#7e94a78c*/;
}

.product-gallery {
	background-color: #e6e6e6;
}

/*Builder Main Header / Navigation*/

.builder-header h1 {
	font-size: 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	color: #202020;
	padding-bottom: 17px;
}
.builder-header hr {
	color: #9b9b9b;
	margin-top: 0px;
	margin-bottom: 0px;
}
h2.builder-step-title  {
	font-size: 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-style: italic;
	color: #202020;
	padding-top: 40px;
}
.steps-small {
	padding-bottom: 25px;
}
.steps-small ul {
	list-style-type: none;
	overflow: hidden;
	padding-left: 0px;
	cursor: pointer;
}

.steps-small .active {
	color: #0062A8;
	font-weight: 500;
}

.steps-small :hover {
	color: #0062A8;
}
.steps-small li {
	float: left;
	font-size: 15px;
	font-family: 'Montserrat', sans-serif;
	color: #8a8a8a;
	padding-right: 10px;
}

.steps-small img {
	width: 20px;
    height: 10px;
    padding-left:5px;
    padding-right:3px;
}

/*Builder Bar*/


.review-bar {
	background-color: #0062a8d9 /*#94a7b7*/;
	color: white;
	text-transform: uppercase;
	padding-left: 9vw;
}



.picker-header {
	float:left;
	font-weight: 200;
	font-size: 15px;
	padding-left: 7px;
}


span[data-product-attribute-variation-result] {
	font-weight: 500;
	font-size: 15px;
	padding-left: 5px;
}

.pa_color, .pa_neck, .pa_hem, .pa_size, .pa_body, .builder-checkout {
	padding-top: 3.5vh;
	padding-bottom: 3.5vh;
	cursor: pointer;

}


.review-bar .pa_color:hover, .review-bar .pa_neck:hover, .review-bar .pa_hem:hover, .review-bar .pa_size:hover, .review-bar .pa_body:hover {
	/*box-shadow: inset 0 0 10px #0062A8;*/
	box-shadow: 0 0 8px #0062A8;
}

.builder-checkout:hover {
	box-shadow: inset 0 0 10px #0062A8;
}

/*color Screen*/

.white-color-btn, .black-color-btn, .navy-color-btn, .grey-color-btn  {
	height: 30px;
	width: 30px;
	border-radius: 30px;
	border:1px solid black;
}


/*Next Button*/

.next-btn {
	font-size: 14px;
	border-radius: 30px;
	padding: 15px 50px 15px 50px;
	font-weight: 200;
	color: #202020;
	border: 1px solid #202020;
}


.next-btn:hover {
	background-color: #202020;
	color: white;
}

.next-btn img {
	width: 26px;
    height: 10px;
    padding-left:10px;
}

.review-bar img {
	width: 15px;
	height: 15px;
	float: left;
	margin-top: 3px;
}
.next-btn:hover  {
	color: white;
}



.image-gallery {
	display: flex;
    align-items: center;
    flex-wrap: wrap;
  	overflow: hidden;
  	overflow-y: scroll;
}

.image-gallery img {
	padding: 20px 0px;
}


.carousel-indicators li {
	text-indent: 0px;
}

.selection-button-top {
	padding-top: 50px;
	padding-left: 0px;	
}
.selection-button-bottom {
	padding-bottom: 50px;
	padding-top: 30px;
	padding-left: 0px;	
}

.selection-button {
	padding-top: 30px;
	padding-left: 15px;
	padding-left: 0px;	
}

.circle-btn {
	border-radius: 30px;
	height: 30px;
	width: 30px;
	text-indent: 40px;
	cursor: pointer;
	background-color: transparent;
	color: #202020;
	border: 1px solid #202020;
}

.circle-btn:hover {
	border: 1px solid #3ca0e7;
	font-weight: 500;
	background-color: #202020;
}

.container-fluid .review-bar {
  -webkit-overflow-scrolling: touch;
}

.nav-link {
    padding: .5rem;
    position: relative;
    text-decoration: none;
    cursor: pointer;
 	margin-left: 2rem;
 	margin-right: 2rem;
 }
.nav-link:hover {
	font-weight: 500;
}

.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0062A8;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}



.steps-small li {
    padding-top: 10px;
}
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" type="text/css" href="buildertwo.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,500i|Poppins:400,500" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet">
    <title>OneTee Builder 2.0</title>
</head>

<body>
    <nav class="navbar navbar-light">
        <button class="navbar-toggler x-button" type="button" data-toggle="collapse" data-target="#navbarsmall" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="x-icon"><span></span><span></span><span></span><span></span></div>
        </button>
        <div class="collapse navbar-collapse" id="navbarsmall">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Sizing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shipping</a>
                </li>
            </ul>
        </div>
        <div class="cart-item has-icon">
            <a href="https://onetee.shop/cart/" title="Cart" class="header-cart-link is-small">
                <span class="cart-icon image-icon">
                    <strong>0</strong>
                </span>
            </a>
        </div>
    </nav>
    <div id="carouselBuilder" class="carousel slide carousel-fade" data-interval="false">
        <div class="carousel-inner">
            <div class="carousel-item active" data-product-attribute="pa_color" data-slide-number="1">
                <div class="container-fluid">
                    <div class="row main-row align-items-center">
                        <div class="col-sm-12 col-lg-6 col-left">
                            <div class="left-content">
                                <div class="builder-header no-sm-mobile">
                                    <h1>Build your shirt</h1>
                                    <div class="steps-small">
                                        <ul>
                                            <li data-target="#carouselBuilder" data-slide-to="0" class="active">Color<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="1">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
                                        </ul>
                                    </div>
                                    <hr>
                                </div>
                                <h2 class="builder-step-title">Step 1. Select Your Colour</h2>
                                <div class="selection-button-top">
                                    <button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="black">black</button>
                                </div>
                                <div class="selection-button-bottom">
                                    <button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_color" data-product-attribute-variation="white">white</button>
                                </div>
                                <button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="1">Next<img src="next.png" class="next-arrow" alt="next" /></button>
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
                            <div class="right-content">
                                <img class=" img-fluid" alt="Responsive image" src="black.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item" data-product-attribute="pa_neck" data-slide-number="2">
                <div class="container-fluid">
                    <div class="row main-row align-items-center">
                        <div class="col-sm-12 col-lg-6 col-left">
                            <div class="left-content">
                                <div class="builder-header no-sm-mobile">
                                    <h1>Build your shirt</h1>
                                    <div class="steps-small">
                                        <ul>
                                            <li data-target="#carouselBuilder" data-slide-to="0">Color<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="1" class="active">Neck<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="2">Hem<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="3">Size<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="4">Body<img src="next.png" class="next-arrow" alt="next" /></li>
                                            <li data-target="#carouselBuilder" data-slide-to="5">Checkout</li>
                                        </ul>
                                    </div>
                                    <hr>
                                </div>
                                <h2 class="builder-step-title">Step 2. Select Your Neck Line</h2>
                                <div class="col-12 selection-button-top">
                                    <button class="button circle-btn black-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="crew">crewneck</button>
                                </div>
                                <div class="col-12 selection-button-bottom">
                                    <button class="button circle-btn white-btn white-trigger" data-product-attribute="pa_neck" data-product-attribute-variation="v-neck">vneck</button>
                                </div>
                                <button type="button" class="btn next-btn" data-target="#carouselBuilder" data-slide-to="2">Next<img src="next.png" class="next-arrow" alt="next" /></button>
                            </div>
                        </div>
                        <div class="col-sm-12 col-lg-6 col-right text-center align-self-center">
                            <div class="right-content">
                                <img class=" img-fluid neck-img" alt="Responsive image" src="v-neck-black.png">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
       
        <!-- Bottom Bar -->
        <div class="container-fluid review-bar">
            <div class="row flex-row flex-nowrap">
                <div class="pa_color col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="0">
                    <img src="tick-inside-circle.png" class="tick-circle" alt="" />
                    <div class="picker-header">Colour:<span data-product-attribute-variation-result="">Black</span>
                    </div>
                </div>
                <div class="pa_neck col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="1">
                    <img src="tick-inside-circle.png" class="tick-circle" alt="" />
                    <div class="picker-header">Neck:<span data-product-attribute-variation-result="">Crew</span>
                    </div>
                </div>
                <div class="pa_hem col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="2">
                    <img src="tick-inside-circle.png" class="tick-circle" alt="" />
                    <div class="picker-header">Hem:<span data-product-attribute-variation-result="">Straight</span>
                    </div>
                </div>
                <div class="pa_size col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="3">
                    <img src="tick-inside-circle.png" class="tick-circle" alt="" />
                    <div class="picker-header">Size:<span data-product-attribute-variation-result="">L</span>
                    </div>
                </div>
                <div class="pa_body col-3 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="4">
                    <img src="tick-inside-circle.png" class="tick-circle" alt="" />
                    <div class="picker-header">Body:<span data-product-attribute-variation-result="">Slim</span>
                    </div>
                </div>
                <div class="builder-checkout col-4 col-lg-2 d-flex justify-content-center" data-target="#carouselBuilder" data-slide-to="5">
                    <div class="picker-header">Checkout
                    </div>
                </div>
            </div>
        </div>
         
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src="js/boostrap.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="buildertwo.js"></script>
</body>

</html>

最佳答案

希望对您有所帮助。这是一个非常简单的解释，但我相信您可以将其实现到您的代码中。您的列的问题是它们的高度不正确。它们太短了，所以即使在列下方添加了评论栏之后，仍然有一堆空间。

我就是这样解决的。你可以使用 css 中内置的 calc() 函数。您可以在下面的解决方案中看到我在使用它。如果您提前知道评论栏的高度，您可以从 100vh 或 100% 中减去它(我使用的是 100vh)。

我假设评论栏是 50px，当然，它可以不同。此实现适用于任何屏幕尺寸。如果您运行该代码段，进入全屏模式并调整屏幕大小，您会看到 top-content 会自行调整并将审阅栏推到底部。

所以尝试将它实现到您的代码中，看看它是否有效!如果没有，我会继续努力提供帮助。如果这不是您正在寻找的解决方案，我深表歉意。

此外，欢迎来到 Stack Overflow!它在这里表示您是新用户。

* {
 margin: 0;
 padding: 0;
}

.top-content {
  width: 100%;
  height: calc(100vh - 50px);
  background-color: blue;
}

.review-bar {
  width: 100%;
  height: 50px;
  background-color: green;
}
 <div class='top-content'>
   This content here would be your two columns
 </div>

 <div class='review-bar'>
   This, of course, would be your review bar
 </div>

关于html - Bootstrap 4 全屏桌面 - 列填充剩余空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54963013/

24 4 0
文章推荐： javascript - Google 图表和 Ajax 响应
文章推荐： javascript - Protractor invisibilityOf flakiness，抛出 NoSuchElementError
文章推荐： javascript - 如何区分用户中止的调用和错误(jquery 文件上传)
文章推荐： html - 如何让页脚不阻塞 HTML 中的 div 部分？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com