将div的宽度设置为整页答案

【问题标题】：Set width of div to full page将div的宽度设置为整页
【发布时间】：2022-07-11 21:30:43
【问题描述】：

您好，我有一个登录页面。我想使用引导程序将标题的宽度设置为整页。我试图用容器流体类设置它，但它不起作用。如何解决这个问题？它将是响应式的并且宽度设置为整页？感谢帮助

代码如下：

  <header>
        <div id="banner" class="container-fluid baner p-0  ">
            <div class="hero-text">
                <h1 class="raleway900">"Text 1"</h1>
                <p class="raleway600"><strong>Text 2</strong></p>
                <p class="raleway600"><strong>Text 3</strong></p>
                <p class="raleway600"><strong>Text 4</strong> </p>
                <p class="raleway600"><strong>Text 5</strong> </p>
                <button class="btn btn-primary raleway600">Button 1</button>
                <button class="btn btn-outline-light raleway600">Button 2</button>
            </div>
        </div>
    </header>

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,400;0,700;0,900;1,600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,700;0,900;1,600&display=swap');


.raleway600{
    font-family: raleway,sans-serif;
    font-weight: 600;
    font-style: italic; 
}

.raleway900{
    font-family: raleway,sans-serif;
    font-weight: 900;
    font-style:normal;
    font-size: 4em; 
}



*{
    font-family: "Raleway", sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
    padding-top: 60px;
    width: 98%;
    font-family: "Raleway", sans-serif;
}
.navbar{
    font-family: "Raleway", sans-serif;
}

.container{
    padding-top:10rem;
}

/* fix padding under menu after resize */
@media screen and (max-width: 767px) {
    body {
        padding-top: 60px;
    }
}

@media screen and (min-width:768px) and (max-width: 991px) {
    body {
        padding-top: 110px;
    }
}

@media screen and (min-width: 992px) {
    body {
        padding-top: 60px;
    }
}


footer {
    padding: 0;
    margin: 0 auto;
    position: relative;
    background-color: rgb(11, 11, 11);
    width: 100%;
}





.logo {
    width: 7rem;
    height: 7rem;

}

.navbar-brand {
    margin-left: 17em !important;
}



#banner {
    
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("logo");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }




.row-fluid {
    text-align: center;
    justify-content: center !important;
}

.img-responsive {
    margin: 0 auto
}


  nav {
    overflow:auto;
  }

 header {
    height: 100vh;
 }

  .card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

https://jsfiddle.net/j28qyhrw/1/

【问题讨论】：

标题是否在容器中？如果是这样，那就是你的问题。

标签： html css

【解决方案1】：

试试响应式容器允许您指定一个 100% 宽的类，直到达到指定的断点，之后我们为每个更高的断点应用最大宽度。例如，.container-sm 的宽度为 100%，直到到达 sm 断点，它将随着 md、lg、xl 和 xxl 向上扩展。Watch the screenshot

希望对你有帮助

【讨论】：