В настоящее время я работаю над своим первым веб-сайтом, использующим фреймворк twitter-bootstrap 4.Все шло гладко, пока я не столкнулся с следующей проблемой.
В настоящее время у меня есть этот макет для моего сайта:
Текущий макет
Когда на самом деле я хотел бы:
Желаемое расположение
Я попытался найти множество решений, которые я нашел, просматривая переполнение стека, например, вложенные столбцы.Кажется, ничего из этого не работает, я уверен, что это просто из-за моей неопытности, но я озадачен тем, как получить желаемую внешность.
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Welcome to my Website</h2>
</div>
<div class="col-sm-3">
<div id="myCarousel" class="carousel slide pull-right" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><img src="img/Christina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="1"><img src="img/NickyAndChristina.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="2"><img src="img/Nicky.JPG" alt="..."></li>
<li data-target="#myCarousel" data-slide-to="3"><img src="img/Meme.JPG" alt="..."></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/Christina.JPG" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/NickyAndChristina.JPG" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Nicky.JPG" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/Meme.JPG" alt="Fourth slide">
</div>
</div>
</div>
</div>
</div>
</div> <!-- End of Carousel -->
<div class="container-fluid bg-style-2">
<div class="row">
<div class="col-sm-9 par-style"><h2 class="par-heading">Test Header</h2>
</div>
</div>
</div>
Как видно выше, я пытаюсь разместить слайдер фотогалереи справа от моего сайта и форматирование, которое я прикрепил выше, просто не будет работать.Может кто-нибудь дать мне несколько советов?Мне очень понравилось работать над этим сайтом, но я не смогу продвинуться до тех пор, пока не решу этот вопрос, так как это будет мешать моему разуму.