Блог

У меня есть Jumbotron, который я не могу растянуть, чтобы заполнить ширину 100%. Кто-нибудь может помочь?

Я пробовал «container-fluid», а также «jumbotron-fluid», и ни один из них не сработал.

Не вдаваясь в стиль css, я надеюсь на любую помощь относительно того, почему мой Jumbotron не будет распространяться на всю ширину экрана при размерах экрана от малого до xtra-large.

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

 function RenderCard({ item, isLoading, errMess }) {
if (isLoading) {
    return (
        <Loading />
    );
}
else if (errMess) {
    return (
        <h4>{errMess}</h4>
    )
}
else
    return (
        <FadeTransform in
            transformProps={{ exitTransform: 'scale(0.5) translateY(-50%)' }}>
            <div className="row justify-content-center">
                <div className="col-12 col-sm-7 col-md-7 ">
                    <CardDeck>
                        <Card>
                            <CardBody >
                                <div className="text-center">
                                    <CardImg src={baseUrl   item.image} alt="" />
                                    <CardTitle className="bg-primary text-white">{item.name}</CardTitle>
                                    <img src={baseUrl   item.image2} fluid="true" alt="" />
                                    <img src={baseUrl   item.image3} alt="" />
                                    <CardText>{item.shortDescription}</CardText>
                                    <CardText>{item.label}</CardText>
                                    <a href={item.link}>{item.word}</a>
                                </div>
                            </CardBody>
                        </Card>
                    </CardDeck>
                </div>
            </div>
        </FadeTransform>
    );
 }

function Home(props) {
return (
    <div className="container-fluid">
        <div className="jumbotron">

            <div className="row">
                <div className="col-12 col-sm-12 col-md-6">
                    <h1>This doesn't make sesnes</h1>
                    <h5>...Lorem Ipsum</h5>
                </div>
                <div className=" col-12 col-sm-6 col-md-6">
                    <Image src={baseUrl   ("assets/logos/devLogo.png")} fluid="true" alt="Developer Image" />
                </div>
            </div>
        </div>

        <div className="row">
            <div className="col-12 col-sm-12 col-md-12 col-lg-12">
                <h2 className="text-center text-color">My Skills</h2>
            </div>
            <div className="row-content">
                <div className="row">
                    <div className=" col-12 col-md-4 col-lg-4">
                        <h5 className="text-center text-color"> FullStack Web Development</h5>
                        <Fade in>
                            <ul className="no-bullets text-color">
                             ...(images
                            </ul>
                        </Fade>
                    </div>

                    <div class="col-12 col-md-4 col-lg-4">
                        <h5 class="text-center text-color"> Database Administration </h5>
                        <Fade in>
                            <ul class="no-bullets text-color">
                              ... (images)
                            </ul>
                        </Fade>
                    </div>
                    <div class="col-12 col-md-4 col-lg-4">
                        <h5 class="text-center text-color"> Application Development </h5>
                        <Fade in enterOpacity={0.95}>
                            <ul class="no-bullets text-color">
                              ... (images)
                            </ul>
                        </Fade>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="text-center text-color">Some Featured Works</h2>
        <div className="row">
            <div className="col-12 col-sm col-md-6">
                <RenderCard item={props.project}
                    isLoading={props.projectsLoading}
                    errMess={props.projectsErrMess} />
            </div>
            <div className="col-12 col-sm col-md-6">
                <RenderCard item={props.project1}
                    isLoading={props.projectsLoading}
                    errMess={props.projectsErrMess} />
            </div>
        </div>

    </div>
);
}


 export default Home; 
  

…

и мой файл css имеет :

 .jumbotron {
padding: 70px 30px 70px 30px;
margin: 0px auto;
background-color: #141414;
color: floralwhite;
  }
  

Почему он заполняет только то, что кажется 75% ширины всей страницы?

Любая помощь с благодарностью 🙂 Еще раз заранее спасибо!

 <div className="container-fluid">
        <header className="jumbotron ">
            <div className="row">
                <div className="col-12 col-sm-6 col-md-6 ">
                    <h1>This doesn't make sesnes</h1>
                    <h5...</h5>
                </div>
                <div className="align-self-center col-12 col-sm-6 col-md-6">
                    <Image src={baseUrl   ("assets/logos/devLogo.png")} fluid alt="Developer Image" />
                </div>
            </div>
        </header>
  

Чтобы контейнер охватывал всю ширину области просмотра, вам необходимо использовать container-fluid класс с родительским <div>