Bootstrap i niepotrzebny margin conatiner'a

pytanie zadane 11 listopada 2020 w HTML i CSS przez Fiedorekkk Nowicjusz (150 p.)

Witam. Robię obecnie podstrone opartą na bootstrapie. Tutaj link jak to wygląda.

Zamysł jest taki aby te 3 div'y były rozciągnięte na całą szerokość strony a w przypadku zmniejszania okna, aby to div 2 się mniejszał.
Niestety bootstrap standardowo narzuca marginesy. Niektóre udało mi się usunąć, ale container nadal narzucą margines po prawej. Nawet używając .container-fluid width: 100%; i usunięcie marginesów nic nie dało.
Macie jakiś pomysł, albo wiecie w jakim kierunku iść?

<!DOCTYPE html>
<html lang="pl">
<head>
	
	<title>---</title>
	
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
	<style>

body
{
	color: #efefef;
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	background-color: #555555;
	
}

.container
{
	margin: 0px;
	margin-top: 25px;
	padding: 0px;
	width: 100%;
}

.jumpers
{
	text-align: center;
}

</style>

</head>

<body>

	<main>
		
		<section class="jumpers">
		
			<div class="container">
				
				<div class="row">
					
					<!-- lewy-->
					<div class="col-3 p-3">
						<h1>1</h1>
					</div>
					
					<!-- srodek-->
					<div class="col-6 p-3">
						<h1>2</h1>
					</div>
					
					<!-- prawy-->
					<div class="col-3 p-3">
						<h1>3</h1>
					</div>
					
				</div>
				
			</div>	
				
		</section>
		
	</main>
	
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	
	<script src="js/bootstrap.min.js"></script>	
	
</body>
</html>

2 odpowiedzi

odpowiedź 11 listopada 2020 przez pablop76 VIP (123,180 p.)
edycja 11 listopada 2020 przez pablop76

Najlepsza

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Może coś źle wpisałeś? .container-fluid nie posiada marginesów

Style użyte w BT

<div class="container-fluid">              
  <div class="d-flex">
    <div class="p-2">Flex item</div>
    <div class="p-2 flex-grow-1">Flex item</div>
    <div class="p-2">Flex item</div>
  </div>
</div>

*, ::after, ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
.flex-grow-1 {
    -ms-flex-positive: 1!important;
    flex-grow: 1!important;
}
.p-2 {
    padding: .5rem!important;
}

odpowiedź 11 listopada 2020 przez CubeStorm Pasjonat (15,020 p.)

Jeśli chcesz te marginesy usunąć sprawdź pod Zbadaj element jakie klasy im ten margines nadają, następnie je usuwaj, np. za pomocą margin: 0!important. Ewentualnie możesz tym elementom również nadać klasę m-0.

komentarz 11 listopada 2020 przez Fiedorekkk Nowicjusz (150 p.)

Niestety ani important, ani m-0 dla containera nie reaguje. w zbadaj element mam coś takiego

@media (min-width: 1200px)
.container {
    max-width: 1350px;
}
@media (min-width: 992px)
.container {
    max-width: 960px;
}
@media (min-width: 768px)
.container {
    max-width: 720px;
}
@media (min-width: 576px)
.container {
    max-width: 540px;
}

zmieniając te elementy i zmieniając wielkość okna przeglądarki zmienia mi wielkość wszystkich trzech divów bo się nie mieszą. Chcę uzyskać efekt aby to div 2 się zmniejszał.

komentarz 11 listopada 2020 przez CubeStorm Pasjonat (15,020 p.)

Sprawdź co posiada takowe marginesy. Nie musi być to sam kontener a jego dzieci. Najeżdzaj po kolei myszką na kod w Zbadaj element i tam będzie ładnie pokazane co ma margines.