制作2个水平按钮填充模态

时间:2017-02-04 17:56:02

标签: html5 css3 twitter-bootstrap-3

我想让我的水平按钮填满我的模态视图。

这是我使用此按钮类创建的:click here

HTML:

<div class="modal fade" id="usuario_info" abindex="-1" role="dialog" aria-labelledby="myInfoUser" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <center>
                    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRbezqZpEuwGSvitKy3wrwnth5kysKdRqBW54cAszm_wiutku3R" name="aboutme" width="96" height="96" border="0" class="img-circle">
                    <h3 class="media-heading" id="bookId"></h3>
                </center>
                <br>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Subtitle</h3>
                    </div>
                    <p class="cuerpo-info-user">Something</p>
                </div>
                <button type="button" class="btn btn-labeled btn-success">
                    <span class="btn-label"><i class="fa fa-phone"></i></span>
                    Call him      

                </button>
                <button type="button button-infousuario" class="btn btn-labeled btn-success">
                    <span class="btn-label"><i class="fa fa-ban"></i></span>
                    More information
                </button>
                <button type="button button-infousuario" class="btn btn-labeled btn-success">
                    <span class="btn-label"><i class="icon_check"></i></span>
                    Success
                </button>
                <button type="button button-infousuario" class="btn btn-labeled btn-danger">
                    <span class="btn-label"><i class="icon-cancel"></i></span>
                    Remove him
                </button>
                <button type="button" class="btn btn-labeled btn-danger button-infousuario">
                    <span class="btn-label"><i class="icon-trash"></i></span>
                    Remove everything
                </button>
            </dsiv>
        </div>
    </div>
</div><!-- End modal -->  

我的结果:

我尝试过:

.button-infousuario{
    display:inline-block;
}

但没有工作。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您可以通过设置CacheControl来使按钮填充模态视图。但文本将出现在按钮的中心。为了防止这种情况,您可以设置width: 100%

text-align: left