2016-03-07 38 views
0

嗨如何使这个响应即使我调整浏览器的大小,它会看起来像原来的谢谢!Bootstrap Col Responsiveness使其相对/敏感

<section class="swag1 text-center foodft"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
     <div class="our-prod1"> 
      <h2 class="section-heading" >Food for Thoughts</h2> 
     </div> 
     </div> 
     <div class="col-xs-6 col-md-4 foodforimg"> 
     <img src="img/start.jpg"> 
     </div> 
     <div class="col-xs-12 col-md-8"> 
     <div class="foodfort-sec"> 
      <p> Healthy Endings came to life with the best intentions to create all natural snacks, organic when possible, raw and vegan with absolutely no preservatives. We love to snack periodically through out the day and we're always working on creating the most delicious and nutritious snacks to satisfy those cravings. "What fun is snacking if the snacks donít taste orgasmically good!"</p> 
      <br /> 
      <p> Cherie Spencer, the founder and creator of Healthy Endings snacks received her certification as a Health Educator from the world renowned Hippocrates Health Institute in West Palm Beach, Florida and holds a Bachelors in Healthcare Administration from Florida Atlantic University. She also received a culinary certification from Atlantic County VoTech and holds a SafeServ Food Manager Certification/License. She is a holistic chef specializing in raw, living foods and loves to </p> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

CSS

.foodfort-sec { 
    padding-left: 30px; 
} 

原文:

enter image description here

调整大小图:

enter image description here

+0

你可以做一个小提琴什么的? –

回答

0

如果灰色框实际上是一个图像(被调整大小时,屏幕会它的容器的外部),则:

.foodforimg img { 
    width:100%; 
    height:auto; 
} 

应该解决这个问题。

1

你的形象标签需要.img-responsive

<img class="img-responsive" src="img/start.jpg"> 

我希望这就是你要找的人。

0

看看这个。 https://jsfiddle.net/9946ntyb/

您可以将“img-responsive”类添加到图像中,以便自动调整大小。

<img class = 'img-responsive' src = 'img/start.jpg'> 

A还您休息标签坏了,只能用

<br>