bootstrap类媒体在一行中

Question

我使用类媒体引导来列出联系信息。它给了我这个结果：

我希望细节联系人在一行中（不像那样堆叠）。我做了div class = row但是没有给我我想要的东西。

这是我的代码：

＆＃13;

＆＃13;

<section id="kontak">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Kontak</h2>
                <hr class="hr-line">
                <h5>Konfirmasi Pembayaran atau Informasi Lainnya Silahkan Hubungi Kami Di</h5>
                <br>
            </div>
        </div>

        <div class="row">

        <div class="media">
            <div class="col-sm-4">
                <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/whatsapp.jpg');?>" alt="..."></div>
                <div class="media-body">
                    <h4 class="media-heading">Whatsapp</h4>
                    <h5>+62-898-2057-545</h5>
                </div>
            </div>
        </div>
        <div class="media">
            <div class="col-sm-4">
                <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div>
                <div class="media-body">
                    <h4 class="media-heading">Email</h4>
                    <h7><strong>kirimundangandotcom@gmail.com</strong></h7>
                </div>
            </div>
        </div>
        <div class="media">
            <div class="col-sm-4">
                <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/phone.png') ?>" alt="..."></div>
                <div class="media-body">
                    <h4 class="media-heading">Telepon</h4>
                    <h5>+62-898-2057-545</h5>
                </div>
            </div>
        </div>

        </div>
    </div>
    </section>

＆＃13;

＆＃13;

＆＃13;

请帮助:(

Answer 1

你的媒体块在里面......

<div class="col-sm-4">
        <div class="media">
            <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div>
            <div class="media-body">
                <h4 class="media-heading">Email</h4>
                <h7><strong>kirimundangandotcom@gmail.com</strong></h7>
            </div>
        </div>
    </div>

您的.col_*区块应该是.row的唯一直接子级。连续的所有内容都应该在一列中。

Answer 2

你唯一需要的是用类媒体删除div

<section id="kontak">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Kontak</h2>
                <hr class="hr-line">
                <h5>Konfirmasi Pembayaran atau Informasi Lainnya Silahkan Hubungi Kami Di</h5>
                <br>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4">
                <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/whatsapp.jpg');?>" alt="..."></div>
                <div class="media-body">
                    <h4 class="media-heading">Whatsapp</h4>
                    <h5>+62-898-2057-545</h5>
                </div>
            </div>
        
        
            <div class="col-sm-4">
                <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div>
                <div class="media-body">
                    <h4 class="media-heading">Email</h4>
                    <h7><strong>kirimundangandotcom@gmail.com</strong></h7>
                </div>
            </div>
        
        
            <div class="col-sm-4">
                <div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/phone.png') ?>" alt="..."></div>
                <div class="media-body">
                    <h4 class="media-heading">Telepon</h4>
                    <h5>+62-898-2057-545</h5>
                </div>
            </div>
        

        </div>
    </div>
    </section>

Answer 3

您的结构不正确

<div class="col-sm-4"> <div class="media"> - - - - - - - </div> </div>

。我举个例子。检查demo