2017-02-04 5 views
0

私の水平ボタンがモーダル表示になりたい。2つの水平ボタンがモーダルになるようにする

これは、このボタンクラスを使用して、私が作ったものである。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; 
} 

ただし、動作しません。

ありがとうございます!

答えて

0

あなたが正しく理解している場合は、ボタンをwidth: 100%に設定してモーダル表示にすることができます。しかし、テキストはボタンの中央に表示されます。あなたが設定できないようにするにはtext-align: left

.button-infousuario{ 
    width: 100%; 
    text-align: left; 
} 
関連する問題