無法強制使用警報級別的引導按鈕在其左側顯示警報文本

大家好我已經創建了兩個按鈕在我的網頁的兩側，一個在左側和一個右側。在它的點擊每個按鈕都顯示像圖片無法強制使用警報級別的引導按鈕在其左側顯示警報文本

，我已經使用的代碼在其相關方的警告文字如下：

<div class="row"> 
    <div class="col-lg-6"> 
    <div class="previous"> 
     <button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button> 
     <span id="alert_info_1" class="alert alert-info"> 
           Alert Info 
     </span> 
     </div> 
    </div> 
    <div class="col-lg-6 text-left"> 
     <div class="next" > 
     <button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button> 
     <span id="alert_info_2" class="alert alert-info "> 
           Alert Info 
     </span> 
     </div> 
    </div> 
    </div>

雖然CSS的按鈕的排列：

.previous { 
text-align: left; 
    } 

.next { 
text-align: right; 
    }

我想什麼做的是使按鈕2的警報信息文本出現在按鈕的左邊，而不是右邊，因爲它是展示在上面的圖片

我試圖在按鈕類中添加文本，但沒有奏效。
我也嘗試添加上拉左級的跨度類，它迫使文本左但警報文本從按鈕2顯得相當遠，如下圖所示：

有沒有人有任何想法如何解決這個問題？

來源

2017-07-26 dk13

你的代碼正在工作，你想要的第一個設計？ –

只需更換你的第二個按鈕，警告框，然後它會工作，如果你不改變你的HTML，所以需要添加一些額外的CSS

.previous { 
 
     text-align: left; 
 
    } 
 

 
    .next { 
 
     text-align: right; 
 
    }

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
<div class="previous"> 
 
    <button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button> 
 
    <span id="alert_info_1" class="alert alert-info"> 
 
          Alert Info 
 
    </span> 
 
</div> 
 
    </div> 
 
    <div class="col-xs-6 text-left"> 
 
<div class="next"> 
 
    <span id="alert_info_2" class="alert alert-info ">Alert Info</span> 
 
    <button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button> 
 
</div> 
 
    </div> 
 
</div>

來源

2017-07-26 12:57:52

交換第二跨度和按鈕：

.previous { 
 
    text-align: left; 
 
} 
 

 
.next { 
 
    text-align: right; 
 
}

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
    <div class="previous"> 
 
     <button type="button" id="button_1" class="btn btn-primary btn-lg">Button1</button> 
 
     <span id="alert_info_1" class="alert alert-info"> 
 
           Alert Info 
 
     </span> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6 text-left"> 
 
    <div class="next"> 
 
     <span id="alert_info_2" class="alert alert-info ">Alert Info</span> 
 
     <button type="button" id="button_2" class="btn btn-primary btn-lg">Button2</button> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-07-26 12:51:50 fen1x

無法強制使用警報級別的引導按鈕在其左側顯示警報文本

回答

相關問題