Wie man den Anchor-Tag mit Bootstrap reaktionsfähig macht, wenn es langen Text und langen Text mit Bild hat?

Ich versuche Design für alle Web und Geräte ansprechend zu machen. Versuchen Sie, die erste Link-Taste ganz nach links (announcing document stuff button) und andere Taste ganz rechts zu halten. es wird Pause für kleines Gerät. Versuchen Sie auch, den Ankertext zu umbrechen, aber er funktioniert nicht. Bitte Beratung. Ist es möglich, es nur durch Bootstrap zu erreichen? wenn nicht, was kundenspezifischer Stil ich muss bitte Beratung machen. Ich kann jQuery nicht verwenden.Wie man den Anchor-Tag mit Bootstrap reaktionsfähig macht, wenn es langen Text und langen Text mit Bild hat?

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; 

}

Dies ist, wie ich es machen möchte:

Quelle

2016-07-30 aka

Versuchen class="text-right" auf die Schaltfläche Entfernen Behälter, so etwas wie das Hinzufügen von:

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

Und auch die Bruchstellen der einzelnen Klassen verwenden, wenn die beiden Tasten kollabieren u eine „col-xs-12“ auf der hinzufügen könnte Knöpfe Behälter, so dass sie in einer anderen Linie beginnen.

Wenn Sie eine einfache Auslosung des Layouts hinzufügen, können Sie wollen, es wird einfacher sein, zu helfen ... schwierig, ohne ein Unentschieden zu visualisieren:/

UPDATE

Für das Symbol in der button, es ist immer eine bessere Praxis, ein Hintergrundbild stattdessen auf einem Bild auf dem HTML zu verwenden.

HERE YOU CAN SEE A LIVE EXAMPLE. Sie müssen Medienabfragen für Ihre reaktionsfähigen Schaltflächen verwenden. Hoffe es hilft.

Quelle

2016-07-31 00:01:53

Ich habe Zeichen für Visualisierung hinzufügen. möchte es so anzeigen. zwei Tasten sollten immer ausgerichtet sein. Ich möchte es nicht in einer anderen Zeile, wenn es zusammenbrach. – aka

Wie man den Anchor-Tag mit Bootstrap reaktionsfähig macht, wenn es langen Text und langen Text mit Bild hat?

Antwort

Verwandte Themen