如何在Bootstrap中放置彼此相邻的部分？

Question

嘿，我正在尝试像这样修改这个引导页面http://127.0.0.1:5500/html/blue-index.html

。我正在尝试博客部分和团队部分相邻。知道怎么做吗？我是一个初学者，在启动，所以我不知道如何做这些基本的东西。提前谢谢你的建议

enter code here

    <!-- ***** Blog Start ***** -->
<section class="section white padding-bottom-80" id="blog">

    <div class="container">
        <!-- ***** Section Title Start ***** -->
        <div class="row">
            <div class="col-lg-12">
                <div class="center-heading">
                    <h2 class="section-title">Latest Blog Posts</h2>
                </div>
            </div>
            <div class="offset-lg-3 col-lg-6">
                <div class="center-text">
                    <p>Donec vulputate urna sed rutrum venenatis. Cras consequat magna quis arcu elementum, quis congue risus volutpat.</p>
                </div>
            </div>
        </div>
        <!-- ***** Section Title End ***** -->

        
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="blog-post-thumb">
                    <div class="img">
                        <img src="assets/images/photos/blog/1.jpg" alt="">
                    </div>
                    <div class="blog-content">
                        <h3>
                            <a href="blue-blog-single.html">Jirono Expands the Leadership Team with David Lin, Controller</a>
                        </h3>
                        <div class="text">
                            Mauris tellus sem, ultrices varius nisl at, convallis iaculis mauris. Sed eget sem vitae purus tempus dignissim.
                        </div>
                        <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="blog-post-thumb">
                    <div class="img">
                        <img src="assets/images/photos/blog/2.jpg" alt="">
                    </div>
                    <div class="blog-content">
                        <h3>
                            <a href="blue-blog-single.html">Jirono Partners with Velocloud to Deliver Managed SD-WAN</a>
                        </h3>
                        <div class="text">
                            Cras imperdiet faucibus sem, a dignissim urna feugiat sed. Interdum et malesuada fames ac ante ipsum.
                        </div>
                        <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="blog-post-thumb">
                    <div class="img">
                        <img src="assets/images/photos/blog/3.jpg" alt="">
                    </div>
                    <div class="blog-content">
                        <h3>
                            <a href="blue-blog-single.html">Corporate IT Solutions Adds Neva as Senior Account Executive</a>
                        </h3>
                        <div class="text">
                            Quisque euismod nec lacus sit amet maximus. Ut convallis sagittis lorem auctor malesuada. Morbi auctor tortor.
                        </div>
                        <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                    </div>
                </div>
            </div>
        
    </div>
    
    <!-- ***** Section Title End ***** -->

    
        <!-- ***** Team Item Start ***** -->
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="team-item">
                <div class="team-content">
                    <div class="team-info">
                        <h3 class="user-name">Fletch Skinner</h3>
                        <span>Product Strategist</span>
                    </div>
                    <ul class="social">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-github"></i></a></li>
                    </ul>
                    <p>Proin arcu ligula, malesuada id tincidunt laoreet, facilisis at justo. Sed at lorem.</p>
                </div>
                <div class="user-image">
                    <img src="assets/images/photos/team/1.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- ***** Team Item End ***** -->
        
        <!-- ***** Team Item Start ***** -->
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="team-item">
                <div class="team-content">
                    <div class="team-info">
                        <h3 class="user-name">Lance Bogrol</h3>
                        <span>Visual Designer</span>
                    </div>
                    <ul class="social">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-github"></i></a></li>
                    </ul>
                    <p>Aliquam eget convallis nunc, et porta libero. Etiam velit, lobortis ut tristique.</p>
                </div>
                <div class="user-image">
                    <img src="assets/images/photos/team/2.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- ***** Team Item End ***** -->
        
        <!-- ***** Team Item Start ***** -->
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="team-item">
                <div class="team-content">
                    <div class="team-info">
                        <h3 class="user-name">Valentino Morose</h3>
                        <span>Android Developer</span>
                    </div>
                    <ul class="social">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-github"></i></a></li>
                    </ul>
                    <p>Curabitur tristique nec orci quis porta. Aliquam leo justo, auctor eget sapien.</p>
                </div>
                <div class="user-image">
                    <img src="assets/images/photos/team/3.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- ***** Team Item End ***** -->
        
        <!-- ***** Team Item Start ***** -->
        <div class="col-lg-3 col-md-6 col-sm-12">
            <div class="team-item">
                <div class="user-image">
                    <img src="assets/images/photos/team/4.jpg" alt="">
                </div>
                <div class="team-content">
                    <div class="team-info">
                        <h3 class="user-name">Giles Posture</h3>
                        <span>iOS Developer</span>
                    </div>
                    <ul class="social">
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-github"></i></a></li>
                    </ul>
                    <p>Nunc posuere lectus ut aliquet facilisis. Nam varius id magna et convallis.</p>
                </div>
            </div>
        </div>
    
</section>

Answer 1

我想下面的代码可以帮助你，你想要

  <!-- ***** Blog Start ***** -->
    <section class="section white padding-bottom-80" id="blog">
        <div class="container">
            <!-- ***** Section Title Start ***** -->
            <div class="text-center">
                <h2 class="section-title">Latest Blog Posts</h2>
                <p>Donec vulputate urna sed rutrum venenatis. Cras consequat magna quis arcu elementum,
                    quis congue risus volutpat.</p>
            </div>
            <div class="row">
                <div class="col-6">
                    <!-- ***** Section Title End ***** -->
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="blog-post-thumb">
                            <div class="img">
                                <img src="assets/images/photos/blog/1.jpg" alt="">
                            </div>
                            <div class="blog-content">
                                <h3>
                                    <a href="blue-blog-single.html">Jirono Expands the Leadership Team with David Lin,
                                        Controller</a>
                                </h3>
                                <div class="text">
                                    Mauris tellus sem, ultrices varius nisl at, convallis iaculis mauris. Sed eget sem
                                    vitae
                                    purus tempus dignissim.
                                </div>
                                <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="blog-post-thumb">
                            <div class="img">
                                <img src="assets/images/photos/blog/2.jpg" alt="">
                            </div>
                            <div class="blog-content">
                                <h3>
                                    <a href="blue-blog-single.html">Jirono Partners with Velocloud to Deliver Managed
                                        SD-WAN</a>
                                </h3>
                                <div class="text">
                                    Cras imperdiet faucibus sem, a dignissim urna feugiat sed. Interdum et malesuada
                                    fames ac
                                    ante ipsum.
                                </div>
                                <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="blog-post-thumb">
                            <div class="img">
                                <img src="assets/images/photos/blog/3.jpg" alt="">
                            </div>
                            <div class="blog-content">
                                <h3>
                                    <a href="blue-blog-single.html">Corporate IT Solutions Adds Neva as Senior Account
                                        Executive</a>
                                </h3>
                                <div class="text">
                                    Quisque euismod nec lacus sit amet maximus. Ut convallis sagittis lorem auctor
                                    malesuada.
                                    Morbi auctor tortor.
                                </div>
                                <a href="blue-blog-single.html" class="btn-primary-line">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <!-- ***** Team Item Start ***** -->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="team-item">
                            <div class="team-content">
                                <div class="team-info">
                                    <h3 class="user-name">Fletch Skinner</h3>
                                    <span>Product Strategist</span>
                                </div>
                                <ul class="social">
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-github"></i></a></li>
                                </ul>
                                <p>Proin arcu ligula, malesuada id tincidunt laoreet, facilisis at justo. Sed at
                                    lorem.</p>
                            </div>
                            <div class="user-image">
                                <img src="assets/images/photos/team/1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- ***** Team Item End ***** -->

                    <!-- ***** Team Item Start ***** -->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="team-item">
                            <div class="team-content">
                                <div class="team-info">
                                    <h3 class="user-name">Lance Bogrol</h3>
                                    <span>Visual Designer</span>
                                </div>
                                <ul class="social">
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-github"></i></a></li>
                                </ul>
                                <p>Aliquam eget convallis nunc, et porta libero. Etiam velit, lobortis ut tristique.</p>
                            </div>
                            <div class="user-image">
                                <img src="assets/images/photos/team/2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- ***** Team Item End ***** -->

                    <!-- ***** Team Item Start ***** -->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="team-item">
                            <div class="team-content">
                                <div class="team-info">
                                    <h3 class="user-name">Valentino Morose</h3>
                                    <span>Android Developer</span>
                                </div>
                                <ul class="social">
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-github"></i></a></li>
                                </ul>
                                <p>Curabitur tristique nec orci quis porta. Aliquam leo justo, auctor eget sapien.</p>
                            </div>
                            <div class="user-image">
                                <img src="assets/images/photos/team/3.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- ***** Team Item End ***** -->

                    <!-- ***** Team Item Start ***** -->
                    <div class="col-lg-3 col-md-6 col-sm-12">
                        <div class="team-item">
                            <div class="user-image">
                                <img src="assets/images/photos/team/4.jpg" alt="">
                            </div>
                            <div class="team-content">
                                <div class="team-info">
                                    <h3 class="user-name">Giles Posture</h3>
                                    <span>iOS Developer</span>
                                </div>
                                <ul class="social">
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-github"></i></a></li>
                                </ul>
                                <p>Nunc posuere lectus ut aliquet facilisis. Nam varius id magna et convallis.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>