Question

我目前正在使用自己的第一个网站，该网站使用的是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>

如上所示，我正在尝试在我的网站右侧添加一个照相馆滑块，以及上面附带的格式，它根本无法工作。有人可以给我一些指导吗？我一直很喜欢在这个网站上工作，但是直到解决了这个问题，我才能继续前进，因为这会困扰我。

Answer 1

@nedge

https://jsfiddle.net/saurabhanand/4f0pztcu/2/

<div class="container">
   <div class="row container-0">
      <div class="col-sm-6">
         <div class="row container-1">
            <div class="col-sm-12">
               <img class="rgt-side-img" src="https://via.placeholder.com/500x250">
            </div>
         </div>
         <div class="row container-2">
            <div class="col-sm-6">
               <img class="rgt-side-img" src="https://via.placeholder.com/500">
            </div>
            <div class="col-sm-6">
               <img class="rgt-side-img" src="https://via.placeholder.com/500">
            </div>
         </div>
      </div>
      <div class="col-sm-6">
         <img class="rgt-side-img" src="https://via.placeholder.com/500">
      </div>
   </div>
</div>

我希望这对您有所帮助。您可以使用自己的内容替换img标签。

容器行对齐问题

1 个答案: