引導按鈕

Question

我使用引導來創建應該非常大的按鈕。它必須在左邊有一個文字，中間是一張照片，右邊是一個箭頭。

This is what it should look like

我用盡了一切辦法把初始文本在左側，這是行不通的。 有沒有人有這方面的經驗？

這是我的代碼如下所示：

.framework-title { 
 
    color: deepskyblue; 
 
    font-weight: bold; 
 
    font-size: 120%; 
 
    vertical-align: middle; 
 
} 
 

 
.btn-framework { 
 
    color: #333; 
 
    background-color: #fff; 
 
    border-color: #ccc; 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 

 
.btn-framework:hover { 
 
    -webkit-filter: brightness(90%); 
 
    -moz-filter: brightness(90%); 
 
    -o-filter: brightness(90%); 
 
    -ms-filter: brightness(90%); 
 
    filter: brightness(90%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-framework" data-toggle="collapse" data-target="#framework1" tyle="text-align:left !important; padding-left:6px !important;"> 
 
              
 
    <span class="framework-title text-align:left !important; padding-left:6px !important;">Phase</span> 
 
    <img src="images/analyze/1_phase.png" width="800px" style="margin-right: 0px;"> 
 
    <span class="glyphicon glyphicon-menu-right" style="vertical-align: middle;"></span> 
 
     
 
</button>

Answer 1

你可以浮起來左，右？不完全確定要:-D

.framework-title { 
 
    color: deepskyblue; 
 
    font-weight: bold; 
 
    font-size: 120%; 
 
    vertical-align: middle; 
 
    float:left; 
 
} 
 
.btn-framework { 
 
    color: #333; 
 
    background-color: #fff; 
 
    border-color: #ccc; 
 
    width: 200px; 
 
    margin: auto; 
 
    
 
} 
 

 
.glyphicon-menu-right {float:right;} 
 

 
.btn-framework:hover { 
 
    -webkit-filter: brightness(90%); 
 
    -moz-filter: brightness(90%); 
 
    -o-filter: brightness(90%); 
 
    -ms-filter: brightness(90%); 
 
    filter: brightness(90%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<button type="button" class="btn btn-framework" data-toggle="collapse" data-target="#framework1" tyle="text-align:left !important; padding-left:6px !important;"> 
 

 
<span class="framework-title text-align:left !important; padding-left:6px !important;">Phase</span> 
 
<img src="images/analyze/1_phase.png" width="800px" style="margin-right: 0px;" alt="image1"> 
 
<span class="glyphicon glyphicon-menu-right" style="vertical-align: middle;"></span> 
 

 
</button>