Фоновый цвет начальной загрузки не будет занимать ширину полной страницы - PullRequest
0 голосов
/ 26 января 2019

Я пытаюсь сделать фон раздела моего сайта другим цветом.Я пробовал делать отступы и поля 0, а также некоторые другие вещи безрезультатно.Я добавляю здесь и CSS, и HTML.

<div className="team">
<h1 className="text-center">Our Team</h1>
<div className="row">
    <div className="col-lg-4 col-md-4 col-sm-12 item">
        <div className='circular'>
            <img src={nat} className="img-fluid" alt="team"/>
        </div>
        <div className="des">Natalie</div>
        <div className="text-muted">Manager</div>
    </div>
    <div className="col-lg-4 col-md-4 col-sm-12 item">
        <div className='circular'>
            <img src={rina} className="img-fluid" alt="team"/>
        </div>
        <div className="des">Rina</div>
        <div className="text-muted">Rina Schiller is a software engineer in the investment bank at JPMorgan Chase. She graduated from Hunter college in NYC with a major in digital media and minors in computer science and gender studies. She is very passionate about politics, gender equality, technology, and short hair.</div>
    </div>
    <div className="col-lg-4 col-md-4 col-sm-12 item">
        <div className='circular'>
            <img src={jules} className="img-fluid" alt="team"/>
        </div>
        <div className="des">Jules</div>
        <div className="text-muted">Front End Developer</div>
    </div>
</div>

CSS:

.team{
    margin: 4em 0;
    position: relative;  
   }
   .team h1{
    color:maroon;
   }
   .team .item{
    position: relative;
   }
   .team .des{
    background: maroon;
    color: #fff;
    text-align: center;
    transition:.3s ease-in-out;
    margin-top:3px;
   }

   .teamColor {
       background:pink;
       position: absolute;
       min-height: 100%;
       min-width: 100%;
       margin: 0 auto;
       padding: 0 auto;
   }

1 Ответ

0 голосов
/ 26 января 2019

Добро пожаловать в Stackoverflow. Почему вы используете className вместо класса? Я считаю, что это ваша проблема

пожалуйста, попробуйте это

.team {
	margin: 4em 0;
	position: relative;
}
.team h1 {
	color:maroon;
}
.team .item {
	position: relative;
}
.team .des {
	background: maroon;
	color: #fff;
	margin-top:3px;
	text-align: center;
	transition:.3s ease-in-out;
}
.teamColor {
	background:pink;
	margin: 0 auto;
	min-height: 100%;
	min-width: 100%;
	padding: 0 auto;
	position: absolute;
}
<div class="team">
	<h1 class="text-center">Our Team</h1>
	<div class="row">
		<div class="col-lg-4 col-md-4 col-sm-12 item">
			<div class='circular'>
				<img src={nat} class="img-fluid" alt="team"/>
			</div>
			<div class="des">Natalie</div>
			<div class="text-muted">Manager</div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-12 item">
			<div class='circular'>
				<img src={rina} class="img-fluid" alt="team"/>
			</div>
			<div class="des">Rina</div>
			<div class="text-muted">Rina Schiller is a software engineer in the investment bank at JPMorgan Chase. She graduated from Hunter college in NYC with a major in digital media and minors in computer science and gender studies. She is very passionate about politics, gender equality, technology, and short hair.</div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-12 item">
			<div class='circular'>
				<img src={jules} class="img-fluid" alt="team"/>
			</div>
			<div class="des">Jules</div>
			<div class="text-muted">Front End Developer</div>
		</div>
	</div>
</div>

здесь я получаю бордовый фон, а не розовый, поскольку в вашем коде нет элемента с class = teamColor

...