Осталось места в bootstrap - PullRequest
Новая
       4

Осталось места в bootstrap

0 голосов
/ 30 апреля 2020

Веб-сайт HTML 

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

Слева выводится поле как таковое:

enter image description here

Я пытался заменить отступы и пробовал различные варианты с плавающей точкой, но ни один из них, похоже, не работает. Любые решения?

Ответы [ 2 ]

2 голосов
/ 30 апреля 2020

Вы используете класс .container, это для создания центрированного контейнера.

Если вы не хотите использовать этот класс .container-fluid как , подробно описано в документации :

Используйте .container-fluid для контейнера полной ширины, охватывающего вся ширина области просмотра.

Если вы не хотите использовать контейнер, тогда вообще не используйте контейнер. 

.navbar-pink {
background-color: pink
}

.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<header class="navbar navbar-expand navbar-pink"> 
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <h2 class="title-yellow">Notifications</h2>
      <div>You have a new follow </div>
      <div>Your previous request was approved</div>
    </div>
    <div class="col-md-9">Hiiiii</div>
  </div>
</div>
1 голос
/ 30 апреля 2020

Если я правильно понял, вы пытаетесь удалить интервал из этой части см. Стрелку на изображении Если это так, вы можете просто использовать контейнер bootstrap 'css class " -fluid "вместо« container ».

Класс« container »оставляет отступы / пробелы слева и справа, тогда как класс« container-liquid »использует полную ширину экрана.

Вот полный код - 

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="float-left" style="background-color:grey;">
                    <h2 style="background-color:yellow;">Notifications</h2>
                    <div>You have a new follow </div>
                    <div>Your previous request was approved</div>
                    <div></div>
                </div>
            </div>
            <div class="col-md-9">Hiiiii</div>
        </div>
    </div>
    <script src="jquery.slim.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
</body>

</html>

Обратите внимание, я использовал bootstrap cdn.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...