Bootstrap Col响应性使其相对/响应

Question

您好我怎么能做到这个响应即使我调整浏览器大小它将看起来像原来的谢谢！

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

原文：

调整大小的Img：

Answer 1

您的图片代码需要.img-responsive

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

我希望你能找到的是什么。

Answer 2

如果灰色框实际上是一个图像（在调整屏幕大小时进入其容器之外），那么：

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

应解决它。

Answer 3

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

您可以在图片中添加“img-responsive”类，以便自动调整大小。

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

你的破坏标签也被破坏了，只能使用

<br>