Как удалить пространство для желоба для конкретного div в Bootstrap?

28.12.2019Bootstrap, Веб-технологии

Чтобы удалить пространство желоба для определенного div, сначала мы должны знать, что такое пространство желоба. В Bootstrap 4, в сетке есть 12 столбцов, каждый столбец имеет небольшое пространство между ними, которое известно как пространство желоба. Пространство желоба имеет ширину 30 пикселей (15 пикселей с каждой стороны столбца). Следующий подход объяснит ясно.

Подходить:

По умолчанию Bootstrap 4 имеет class = ”no-gutters”, чтобы удалить пустые пространства любого конкретного div. На следующем изображении показано выделенное пространство желоба и пространство между столбцами в системе начальной загрузки 4 12 столбцов сетки. Вы даже можете изменить ширину желоба, уменьшив ширину желоба на 15 пикселей между столбцами.

Пример 1. Ниже приведен пример, иллюстрирующий, как удалить пространство для желоба для определенного элемента div.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

</script>

<script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

</script>

<script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

</head>

<body>

<center>

<div class="container">

<h1 style="color:green;padding:13px;">

GeeksforGeeeks

</h1>

<br>

<div class="row p-3">

<h2><em>With Gutter space</em></h2>

</div>

<div class="row border border-dark ">

<div class="col-12 col-sm-6 col-md-8 bg-primary ">

.col-12 .col-sm-6 .col-md-8

</div>

<div class="col-6 col-md-4 bg-secondary">

.col-6 .col-md-4

</div>

<div class="row p-3">

<h2><em>Without Gutter space</em></h2>

</div>

<div class="row no-gutters border border-dark">

<div class="col-12 col-sm-6 col-md-8 bg-primary ">

.col-12 .col-sm-6 .col-md-8

</div>

<div class="col-6 col-md-4 bg-secondary">

.col-6 .col-md-4

</div>

</center>

</body>

</html>

Выход:

Пример 2: Ниже приведен пример, показывающий, как удалить пространство для желоба только для определенного элемента div.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, initial-scale=1">

<link rel="stylesheet" href=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src=

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

</script>

<script src=

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

</script>

<script src=

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

</script>

</head>

<body>

<center>

<div class="container">

<h1 style="color:green;padding:13px;">

GeeksforGeeeks

</h1>

<br>

<div class="container">

<div class= "row no-gutters">

<div class= "col-6 col-sm-3 bg-info">

.col-6 .col-sm-3

</div>

<div class= "col-6 col-sm-3 bg-danger">

.col-6 .col-sm-3

</div>

<b><em>Without Gutter space</em></b>

</div>

<div class="row ">

<div class= "col-6 col-sm-3 bg-warning">

.col-6 .col-sm-3

</div>

<div class= "col-6 col-sm-3 bg-success">

.col-6 .col-sm-3

</div>

<b><em>With Gutter space</em></b>

</div>

<div class= "row no-gutters">

<div class= "col-4 col-sm-2 bg-success">

.col-4 .col-sm-2

</div>

<div class= "col-4 col-sm-2 bg-danger ">

.col-4 .col-sm-2

</div>

<div class= "col-4 col-sm-2 bg-info">

.col-4 .col-sm-2

</div>

<b><em>Without Gutter space</em></b>

</div>

<div class= "row ">

<div class= "col-4 col-sm-2 bg-danger">

.col-4 .col-sm-2

</div>

<div class= "col-4 col-sm-2 bg-info">

.col-4 .col-sm-2

</div>

<div class= "col-4 col-sm-2 bg-warning">

.col-4 .col-sm-2

</div>

<b><em>With Gutter space</em></b>

</div>

</center>

</body>

</html>