Question

我的网页布局在布局中有3个按钮。我希望将3个按钮水平对齐成一行，但我仍然没有办法。

这是布局屏幕截图：

这是我的代码：

<div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                        <div class="row">
                            <div class="col-md-12">
                                <legend style="text-transform: uppercase;">Header 1</legend>
                                <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->register_image?>">
                                <p class="mt15"><?=$page_data->register_text?></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                            <a href="<?=site_url()?>register_modal" class="ajax">
                                <button class="btn btn-warning">REGISTER</button>
                            </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                        <div class="row">
                            <div class="col-md-12">
                                <legend style="text-transform: uppercase;">Header 2</legend>
                                <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->login_image?>">
                                <p class="mt15"><?=$page_data->login_text?></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <a href="<?=site_url()?>login_modal" class="ajax">
                                    <button class="btn btn-warning">LOGIN</button>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                        <div class="row">
                             <div class="col-md-12">
                                 <legend style="text-transform: uppercase;">Header 3</legend>
                                <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->find_image?>">
                                <p class="mt15"><?=$page_data->find_text?></p>
                             </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                            <a href="<?=site_url()?>search_modal" class="ajax">
                                <button class="btn btn-warning">SEARCH</button>
                            </a>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是jsfiddle：https://jsfiddle.net/hc6xcruk/

任何人都知道如何做到这一点？

Answer 1

只需为课程mt15添加一个高度，或者更好地为该部分添加<p>标记中的类，并为其添加高度CSS。高度应参考该部分的最大内容。

<div class="row"> <div class="col-md-12"> <legend style="text-transform: uppercase;">Header 1</legend> <img src="<?=base_url()?>assets/uploads/cms/home_pages/<?=$page_data->register_image?>"> <p class="mt15" style="height=70px; min-height:70px;"><?=$page_data->register_text?></p> </div> </div>

我只是在<p>标记中添加了内联CSS。您还可以添加类并为其提供CSS。该高度必须参考所有div中的最大内容。例如，如果你有3个div而第二个有更多的内容，那么高度应该是根据第二个div。所有分区的高度必须相等，即<p>标签

Answer 2

使用style =＆＃34; max-height：170px;溢出：隐藏;＆＃34;对于图像容器将解决问题。

<div class="col-md-4" style="padding-top: 20px; padding-bottom: 10px;">
                    <div class="row" style="max-height:170px; overflow:hidden;">
                        <div class="col-md-12">
                          ....
                          <p class="mt15" style="height=70px;"><?=$page_data->register_text?></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                           ...........
                        </div>
                    </div>
</div>

Answer 3

如何在内容行之后将所有按钮放在一行中。

<div class="row">
  <div class="col-md-4"><button></div>
  <div class="col-md-4"><button></div>
  <div class="col-md-4"><button></div>
</div>

Answer 4

你可以修正身高p.mt15{ height:90px;}

试试这个https://jsfiddle.net/hc6xcruk/1/

将引导按钮对齐到一行

4 个答案: