Загрузочный контейнер-жидкость - это не вся ширина экрана

Я делаю сайт, и сначала я начинаю с таблицы мобильных стилей. Но ширина контейнера-жидкости не совпадает с шириной окна.

Что я пытался сделать, чтобы исправить это:

 .container-fluid{
      width: 105%
 }

Теперь проблема заключается в том, что, когда я делаю окно немного меньшим, этого все равно недостаточно, но когда я делаю окно немного больше, оно слишком много, когда я делаю это, полоса прокрутки появляется внизу.

100% не работает, так как я уже сказал, что это не полная ширина окна.

Здесь весь объект из файла HTML:

<body>
<!-- Introduction -->

<div id="introduction" class="container-fluid">
    <div class="row">
        <header>
            <h1> Mosescu Bogdan Gabriel </h1>
            <img id="profilepic" src="profilepic.png" />
            <h2> Web Designer | Motion Graphics Artist </h2>
        </header>
    </div>
</div>
<!-- //Introduction// -->

<div id="about" class="container-fluid">
    <div class="row">
        <h1 id="about-title"> Who I am </h1>
    </div>
</div>
</body>

и это файл CSS:

/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */


/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}

Ответы

Ответ 1

Загрузочные контейнеры дополняются.

 .container-fluid {
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
 }

Вам нужно удалить прокладку.

.container-fluid {
    padding-right:0;
    padding-left:0;
    margin-right:auto;
    margin-left:auto
 }

Изменить: это пример с пустыми костями. Если вы скопируете это и вставьте в новый .html-документ, вы не увидите прописку на контейнере. Если вы удалите переопределение container-fluid, вы увидите заполнение.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

        <!-- put your override styles here - AFTER you include Bootstrap -->
        <link href="style-mobile.css" rel="stylesheet">

    </head>
    <style>
        /* override Bootstrap container */
        .container-fluid {
            padding-right:0;
            padding-left:0;
            margin-right:auto;
            margin-left:auto
         }
    </style>
    <body>

        <div class="container-fluid">
            This text hits the left side of the viewport.
        </div>

    </body>
</html>

Отредактированный пример HTML, чтобы включить новую ссылку css

Ответ 2

Попробуйте это, оберните все содержимое внутри container-fluid классом bootstrap row. Он должен работать, спасибо.

<div id="introduction" class="container-fluid">
  <div class="row">
    <header>
      <h1> Mosescu Bogdan Gabriel </h1>
      <img id="profilepic" src="profilepic.png" />
      <h2> Web Designer | Motion Graphics Artist </h2>
    </header>
  </div>

</div>

<div id="about" class="container-fluid">
  <div class="row">
    <h1 id="about-title"> Who I am </h1>
  </div>
</div>

Ответ 3

Если вы просто измените .container-жидкость, которая не будет работать, потому что строка и col внутри контейнера получат свои собственные исправления. Попробуйте добавить полную ширину в контейнерную жидкость, а затем добавьте это:

.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }

Ответ 4

Я очень уверен в том, что Ненад Врачар http://prnt.sc/cb20cy

Ответ 5

С помощью Bootstrap 4:

<div class="container-fluid p-0"> 

  <div class="row m-auto">

    your content here

  </div>

</div>

Ответ 6

Если ничего из этого не работает, попробуйте:

*{margin:0;padding:0}

чтобы удалить отступы/поля, которые могут накладываться на ваш код. Это сработало для меня, поскольку добавление строки, обертывающей контейнер-жидкость, создало горизонтальную прокрутку на моей странице.