如何擺脫頁面右側的空白？-有解無憂

我有一個我正在嘗試設計的網頁，但我在頁面右側被持久性空白所困擾。我曾嘗試重置瀏覽器默認值，但這對頁面沒有影響。我還嘗試確保父元素都具有宣告的大小，但這也沒有影響。

網頁：

如何擺脫頁面右側的空白？

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.navbar {
  height: 5%;
  background-color: #181818;
}

.siteContainer {
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.siteBody {
  height: 100%;
}

.searchArea {
  background-color: #181818;
}

.resultArea {
  background-color: #121212;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container siteContainer">
  <div class="row navbar">
    <div class="col col-2 ">
      Logo
    </div>
    <div class="col col-10 ">
      Navbar
    </div>
  </div>
  <div class="row siteBody">
    <div class="col col-2 searchArea">
      Search and CRUD
    </div>
    <div class="col col-10 resultArea">
      Results
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您正在使用container具有固定最大寬度的引導程式類（請參閱https://getbootstrap.com/docs/5.1/layout/containers/）。

你想要它container-fluid填滿頁面的 100%。

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.navbar {
  height: 5%;
  background-color: #181818;
}

.siteContainer {
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.siteBody {
  height: 100%;
}

.searchArea {
  background-color: #181818;
}

.resultArea {
  background-color: #121212;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid siteContainer">
  <div class="row navbar">
    <div class="col col-2 ">
      Logo
    </div>
    <div class="col col-10 ">
      Navbar
    </div>
  </div>
  <div class="row siteBody">
    <div class="col col-2 searchArea">
      Search and CRUD
    </div>
    <div class="col col-10 resultArea">
      Results
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/347716.html

標籤：html css 推特引导

上一篇：從HTML中提取資料的條件引數

下一篇：Angular，如何在一頁上顯示多個隨機報價？