Question

我会提前为每个长篇文章道歉。我感谢任何建议/想法！谢谢。

enter image description here

我的布局一旦达到1200px以下就会出现问题（图像和文字下拉）。我不介意它们是否在较小的浏览器中垂直对齐，只要每次都正确定位在正确的标题下方。

标题1 上午8:00
Lorem ispum
Lorem ispum
Lorem ispum

上午8:30
Lorem ispum
Lorem ispum
Lorem ispum

标题2
上午9:00
Lorem ispum
Lorem ispum
Lorem isum

等等......

我的问题是，将这项工作用于移动设备和小屏幕的最佳方法是什么？我一直在阅读关于Bootstrap的img-reponsive类并已应用它，但我没有看到图像的差异 - 我可能没有正确使用它。我想我认为它会缩小图像。

此外，如屏幕截图所示，有3个标题和4个与之关联的标题。将每个标题与每个关联时间对齐的最佳方法是什么（标题1有两次）。就目前而言，“标题2”和“标题3”的相关时间距离左侧稍远。我已经尝试添加填充/边距右选择“”，但这似乎没有做到这一点。

<div class='tours-information'>
    <div class='container'>
      <div class='row'>
        <div class='col-md-9'>
          <div id='schedule'>
            <h2>Schedule</h2>
              <!--- wrapper for each day -->
              <div class='clearfix'>
                <h3 class='rounded-heading'>Main heading</h3>
              </div>
                  <div class="media">
                    <h5 class="media-heading pull-left ">Heading 1</h5>
                    <img class="media-object pull-left img-responsive" src="img/long_blue_arrow.png" alt="..." />
                    <h5 class="media-heading pull-left">Heading 2</h5>
                    <img class="media-object pull-left img-responsive" src="img/short_blue_arrow.png" alt="..." />
                    <h5 class="media-heading pull-left">Heading 3</h5>
                 </div>

                 <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>8:00am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>8:30am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>9:00am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>10:00am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <span>&nbsp;</span>
               <div class="media">
                    <h5 class="media-heading pull-left ">Heading 1</h5>
                    <img class="media-object pull-left img-responsive" src="img/short_blue_arrow.png" alt="..." />
                    <h5 class="media-heading pull-left">Heading 2</h5>
                    <img class="media-object pull-left img-responsive" src="img/long_blue_arrow.png" alt="..." />
                    <h5 class="media-heading pull-left">Heading 3</h5>
                 </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>8:30am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>8:30am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>9:00am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

                <div class='schedule-location'>
                  <div class='col-md-3'>
                    <h4>10:00am</h4>
                    <div class='schedule-address'>
                      <address>
                      Lorem ispum<br>
                      Lorem ispum<br>
                      <span class='schedule-location-name'>(Lorem ispum)</span>
                    </address>
                   </div>
                 </div>
               </div>

#schedule {
  background-color: #fff;
  float: left;
  padding: 2px 25px 25px;
}

#schedule img {
  margin-top: 3px;
}

#schedule h2 {
  font-size: 35px;
  margin-bottom: 0px;
}

#schedule h3 {
  font-size: 28px;
}

#schedule h4 {
  font-size: 30px;
}

.rounded-heading {
    display:block;
    clear:right;
    float:left;
    padding: 1.5%;
    width:auto;
    height:auto;
    border-radius:10%;
    -moz-border-radius:10%;
    -webkit-border-radius:10%;
    -khtml-border-radius: 10%;
    background:#eee;
    text-align:center;
}

Answer 1

您需要使用row课程。请参阅此处的Bootstrap文档http://getbootstrap.com/css/#grid，请记住您可以将课程结合起来＆＃39;在较小的设备上微调您的布局。

例如<div class="col-sm-6 col-lg-3">会使您的布局在设备≥768px上从4列到2列，然后在手机上设置为单列。

如何使这个容器响应（移动/更小的设备） - Bootstrap 3

1 个答案: