2016-04-06 8 views
0

Ich habe eine img-circle erstellt werden auf der gleichen row als ein Absatz des Textes mit zwei .col-xs-6, platziert werden, aber mein Bild ist über den Rand der container verschütten.img-circle going außerhalb margin

Ich habe versucht, die padding auf 0 zu ändern, aber das hat nicht funktioniert.

Ich habe derzeit kein CSS-Styling für die img-circle.

<div class="container about"> 
    <div class="row"> 
      <div class="col-xs-6"> 
       <p class="hello">Hello,</p> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <p class="intro">text from paragraph here</p> 
      </div> 
      <div class="col-xs-6"> 
       <img class="profile-pic img-circle" src="#"/> 
      </div> 
     </div> 
+0

geben Sie bitte jsfiddle oder Beispiel – Nvan

Antwort

1

benötigen Sie Klasse verwenden .img-responsive in img finden Bootstrap Docs

Bilder in Bootstrap 3 kann der .img-responsive Klasse reaktionsfreundlich über die Zugabe gemacht werden. Dies gilt max-width: 100%;, height: auto; und display: block; zu dem Bild, so dass es gut auf das übergeordnete Element skaliert.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container about"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <p class="hello">Hello,</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <p class="intro">text from paragraph here</p> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <img class="profile-pic img-circle img-responsive" src="//lorempixel.com/1000/1000" /> 
 
    </div> 
 
    </div> 
 
</div>