Сделайте так, чтобы Bootstrap столбец занимал всю ширину страницы (или не менее 90%)

Question

Я работаю над финальным проектом для класса и только учусь использовать bootstrap. Хотя у меня есть кое-какие практические знания о HTML и тому подобном (или я знаю, куда go, если я застряну), единственное, чего я не могу понять на всю жизнь, - это как заставить столбцы bootstrap занимать больше экрана. Я скопировал и вставил соответствующий код ниже, надеюсь, кто-нибудь скажет мне, что я делаю не так, или если это вообще может быть решено!

Я просматривал другие слабые сообщения (я забыл скопировать ссылку , извините!) и веб-сайт w3schools , но у меня все еще та же проблема.

<nav class="navbar navbar-expand-sm bg-white navbar-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Awards</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resume</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Papers</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container">
  <div class="row">
  <! –– The columns still aren't taking up 100% of the screen width. ––>
    <div class="col-sm-2">
        <! –– Ideally more to the left ––>
        Welcome the user to the website here
    </div>
    <div class="col-sm-4">
        Brief bit of information about me
    </div>
    <div class="col-sm-6">
        Image carosel (idk how to spell) with images of me, my friends & family
    </div>
  </div>
</div>

Answer 1

Когда вы используете класс container, он по умолчанию занимает 80% ширины окна вместе с полем справа и слева автоматически. Для 90% окна вам нужно использовать класс container-fluid, чтобы он занимал всю ширину окна. Затем вы col-4 col-2 и col-5 для достижения 90%.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-white navbar-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Awards</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resume</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Papers</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container-fluid">
  <div class="row">
  <! –– The columns still aren't taking up 100% of the screen width. ––>
    <div class="col-sm-2">
        <! –– Ideally more to the left ––>
        Welcome the user to the website here
    </div>
    <div class="col-sm-4">
        Brief bit of information about me
    </div>
    <div class="col-sm-5">
        Image carosel (idk how to spell) with images of me, my friends & family
    </div>
  </div>
</div>

Используйте это:

<div class="container-fluid">
  <div class="row">
  <! –– The columns still aren't taking up 100% of the screen width. ––>
    <div class="col-sm-2">
        <! –– Ideally more to the left ––>
        Welcome the user to the website here
    </div>
    <div class="col-sm-4">
        Brief bit of information about me
    </div>
    <div class="col-sm-5">
        Image carosel (idk how to spell) with images of me, my friends & family
    </div>
  </div>
</div>