Question

对于练习，我正在构建一个类似于http://riotdesign.eu/en/主页中间部分的部分，其中有三个媒体对象，包括home，about，contacts。

我刚刚意识到，当我调整到992px以下时，我的文本容器会溢出并且部分位于图像下方并且部分位于图像下方。

在我关联的网站上，当我以大约991像素宽度调整页面大小时，他们的媒体对象中的文本内容消失，只留下标题。

我该怎么做？

这是我的代码：

  <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>元素，因此它隐藏在小屏幕中。

Bootstrap溢出元素

1 个答案: