如何使用bootstrap使錨標籤響應時，它具有長文本和長文本與圖像？

我嘗試使設計響應所有網絡和設備。嘗試保持第一個鏈接按鈕一直到左邊（通知文檔的東西按鈕）和其他按鈕的權利。它會讓小設備癱瘓。嘗試包裝錨文本，但不工作。請advice.is有可能實現它雖然只是引導？如果沒有什麼自定義樣式我需要請諮詢。我不能使用jQuery。如何使用bootstrap使錨標籤響應時，它具有長文本和長文本與圖像？

plunker link

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    One way 
    <div class="panel panel-body col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-left"> 
     <a class="btn btn-default">Annoucing Notification document(anc)</a> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right"> 
     <a class="btn btn-default">Remove stuff</a> 
     </div> 
    </div><br /> 
    another issue when it has image <br/> 
    <div class="well col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"> 
     <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 no-padding"> 
     <a class="btn btn-default">Annoucing Notification document(anc)</a> 
     </div> 
     <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 no-padding col-lg-push-3"> 
     <a class="btn btn-default"><img id = "img_and" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGvUXEzMLx4-3F37e89TwVwdRt7wE1F79nMiT_Z7sPOZdk6RzC" style = "width:15pt">Remove stuff</a> 
     </div> 
    </div> 
    </body> 

</html>

CSS

anch{ 
    word-wrap : break-word; 
} 

#img_and{ 
    width:5pt; 
    height : 15pt; 
    vertical-align:top; 

}

這是我怎麼想使它：

來源

2016-07-30 aka

嘗試添加class="text-right"的刪除按鈕的容器，這樣的事情：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right text-right"> 
    <a class="btn btn-default">Remove stuff</a> 
</div>

，還可以使用每個類的破發點時，兩個按鈕的倒塌ü可以上添加一個「COL-XS-12」按鈕容器，以便它們以不同的路線開始。

如果你可以添加布局的簡單的抽籤你希望它會更容易幫助......很難沒有平局顯現：/

UPDATE

對於裏面的圖標按鈕，在html上的圖像上使用背景圖像總是一種更好的做法。

HERE YOU CAN SEE A LIVE EXAMPLE.您將不得不爲媒體查詢使用響應按鈕。希望它有幫助。

來源

2016-07-31 00:01:53

我有添加繪製可視化。想要像那樣展示它。兩個按鈕應始終對齊。當它崩潰時，我不希望它在不同的行中。 – aka

如何使用bootstrap使錨標籤響應時，它具有長文本和長文本與圖像？

回答

相關問題