長いテキストと長いテキストのイメージがある場合、ブートストラップを使用してアンカータグを反応させるにはどうすればいいですか？

私はすべてのウェブとデバイスに反応するように設計しようとしています。最初のリンクボタンを左にずっと押し続けて（文書の内容を記入してください）、他のボタンを押してください。それは小さなデバイスのために休憩を取得します。アンカーテキストをラップしてみてくださいが、動作しません。アドバイスをお願い致します。ブートストラップでしか実現できませんか？私はアドバイスをお願いします。私はjqueryを使用することはできません。長いテキストと長いテキストのイメージがある場合、ブートストラップを使用してアンカータグを反応させるにはどうすればいいですか？

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

<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>

をと2つのボタンは、uは上の「COL-XS-12」を追加することができます崩壊したときにも、各クラスのブレークポイントを使用：このように、削除ボタンコンテナに何かをclass="text-right"を追加してみてくださいボタンのコンテナは、別の行から開始します。

あなたはレイアウトの簡単な描画を追加することができた場合、あなたは...難しいが、引き分けなしで視覚化するのに役立つが容易になるだろうしたい：/

UPDATE

内部のアイコンのボタンの代わりに、htmlの画像の代わりに背景画像を使用する方が良い方法です。

HERE YOU CAN SEE A LIVE EXAMPLE.応答ボタンにメディアクエリを使用する必要があります。お手伝いをしてください。

出典

2016-07-31 00:01:53

私は視覚化のための追加描画があります。そのように表示したい。 2つのボタンは常に整列する必要があります。私はそれが崩壊したときに別の行にしたくない。 – aka

長いテキストと長いテキストのイメージがある場合、ブートストラップを使用してアンカータグを反応させるにはどうすればいいですか？

答えて

関連する問題