Mam ten obraz, który unosi się w prawo, z jakimś tekstem:

<img class="img-responsive" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Jak widać, starałem się użyć klasy IMG-responsywnej. Ale mimo to, na maleńkich ekranach, obraz ściska tekst, który jest obok niego. Wygląda to bardzo bałagan i zastanawiam się, czy jest jakikolwiek sposób, aby obraz był rozwinięty, aby wziąć pełną szerokość na urządzeniach XS?

0
Amy Neville 17 luty 2017, 17:27

2 odpowiedzi

Najlepsza odpowiedź

Jest wiele odpowiedzi:

z zapytaniami multimediów :

Utwornik : http://www.bootply.com/9r942ik2vc

html :

<div class="container">
  <img class="img-responsive mypic" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS :

@media screen and (min-width:769px) {
  .mypic {float:right; 
}

z zduplikowanym zdjęciem:

;

HTML

<div class="container">
  <img class="img-responsive hidden-xs" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
  <img class="img-responsive visible-xs" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Z systemem siatki Bootstrap Zobacz odpowiedź Zimsystem

1
BENARD Patrick 17 luty 2017, 14:39

Użyj siatki zamiast pływaka: right ..

<div class="row">
        <div class="col-sm-3 col-sm-push-9"><img class="img-responsive center-block" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png"></div>
        <div class="col-sm-9 col-sm-pull-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

http://www.codeply.com/go/bb90AS1CB3.

1
Zim 17 luty 2017, 14:34