自举溢出元件

Question

在实践中，我正在构建一个类似于http://riotdesign.eu/en/主页的部分，在该部分中，他们有三个带有home、about、contacts的媒体对象。

我刚刚意识到，当我调整到低于992px的大小时，我的文本容器会溢出，部分位于图像的侧面，部分位于图像的下方。

在我链接到的网站上，当我以大约991 to的宽度调整他们页面的大小时，他们的媒体对象中的文本内容就会散去，只留下标题。

我该怎么做？

这是我的代码：

  <div class="row index-row">


    <div class="col-sm-4 index-left">
      <div class="media-background">

        <div class="row index-row">
          <div class="media col-sm-5 col-md-4">
            <a class="pull-left" href="">
              <%= image_tag('computer.jpg', class: 'media-img', alt: 'About') %>
            </a>
          </div>
            <div class="media-body col-sm-7 col-md-8">
              <h4>
                <%= link_to 'About', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              "What is Creative, our clients and our specialties"
            </p>
            </div>
          </div>

      </div>
    </div>




      <div class="col-sm-4 index-middle">
        <div class="media-background">

          <div class="row index-row">
          <div class="media col-sm-5 col-md-4">
            <a class="pull-left" href="">
              <%= image_tag('notebook.jpg', class: 'media-object', alt: 'Portfolio') %>
            </a>
          </div>
            <div class="media-body col-sm-7 col-md-8">
              <h4>
                <%= link_to 'Portfolio', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              Web design, App design & creative solutions for your brand.
            </p>
            </div>
          </div>

        </div>
      </div>


      <div class="col-sm-4 index-right">
        <div class="media-background">

         <div class="row index-row">
          <div class="media col-sm-5 col-md-4">
            <a class="pull-left" href="">
              <%= image_tag('building.jpg', class: 'media-object', alt: 'Contacts', type: 'button') %>
            </a>
          </div>
            <div class="media-body col-sm-7 col-md-8">
              <h4>
                <%= link_to 'Contacts', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              Where to find the 
              <strong>Creatives</strong> 
              contact module and more.
            </p>
            </div>
          </div>

        </div>
      </div>



    </div>

</div>

这是我的css

@import "bootstrap";
@import url(http://fonts.googleapis.com/css?family=Lato|Open+Sans+Condensed:300);

.navbar {
    border-radius: 0px;
    border-width: 0px;
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 25px;
    margin: 0px;
    background-color: white;
    font-family: 'Open Sans Condensed', sans-serif;
}

.navbar-default .navbar-nav > li > a {
    font-size: 18px;
    font-weight: 400;
    color: #62645c; 
}

.navbar-default .navbar-brand {
    font-size: 22px;
    font-weight: 400;
    color: #62645c; 
}

.carousel-indicators {
    bottom: 20px;
}

.big-container {
    background: #ebeeed;
    padding-top: 40px;
    padding-bottom: 90px;
}


.mid-text-container {
    text-align: center;
    margin-bottom: 55px;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #424b51;
    font-size: 25px;
}


.media-background {
    background-color: white;

}


.middle-wrap {
    padding-top: 90px;
    height: 400px;
}


.media-img {
    width: 100%;
    height: 100%;
}

.media-body {
    padding: 22px 30px 10px 35px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #424b51;
}


.footer-all {
    padding: 90px;
    background-color: white;
}


.footer-1 {
    padding-left: 15px;
    padding-right: 150px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
}


.footer-2 {
    padding-left: 15px;
    padding-right: 150px;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
}


.footer {
    height: 200px;
}

Answer 1

之所以会出现这种情况，是因为您将hidden-sm类赋给了文本的<p>元素，因此它隐藏在小屏幕中。