Jquery 如何使此容器具有响应性（移动/小型设备）-Bootstrap 3_Jquery_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Jquery 如何使此容器具有响应性（移动/小型设备）-Bootstrap 3

jquery html css twitter-bootstrap twitter-bootstrap-3

Jquery 如何使此容器具有响应性（移动/小型设备）-Bootstrap 3,jquery,html,css,twitter-bootstrap,twitter-bootstrap-3,Jquery,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我会为每一篇长文章提前道歉。我感谢您的任何建议/想法！多谢各位我有一个问题，我的布局打破一旦它低于1200像素（图像和文本下拉）。我不介意它们是否在较小的浏览器中垂直对齐，只要每次都正确定位在正确的标题下标题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 等等我的问题是，

我会为每一篇长文章提前道歉。我感谢您的任何建议/想法！多谢各位

我有一个问题，我的布局打破一旦它低于1200像素（图像和文本下拉）。我不介意它们是否在较小的浏览器中垂直对齐，只要每次都正确定位在正确的标题下

标题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 Responsive类的文章，并应用了它，但我看不出图片中有什么不同——可能我没有正确使用它。我想我在想它会缩小图像

此外，如屏幕截图所示，有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;
}


日程
主标题
标题1
标题2
标题3
上午八点
Lorem ispum

Lorem ispum

（Lorem ispum）
上午8:30
Lorem ispum

Lorem ispum

（Lorem ispum）
上午9点
Lorem ispum

Lorem ispum

（Lorem ispum）
上午10:00
Lorem ispum

Lorem ispum

（Lorem ispum）
标题1
标题2
标题3
上午8:30
Lorem ispum

Lorem ispum

（Lorem ispum）
上午8:30
Lorem ispum

Lorem ispum

（Lorem ispum）
上午9点
Lorem ispum

Lorem ispum

（Lorem ispum）
上午10:00
Lorem ispum

Lorem ispum

（Lorem ispum）
#时间表{
背景色：#fff；
浮动：左；
填充：2p25px 25px；
}
#附表img{
利润上限：3倍；
}
#附表h2{
字体大小：35px；
边缘底部：0px；
}
#附表h3{
字号：28px；
}
#附表h4{
字体大小：30px；
}
.四舍五入标题{
显示：块；
清楚:对,；
浮动：左；
填充：1.5%；
宽度：自动；
高度：自动；
边界半径：10%；
-moz边界半径：10%；
-webkit边界半径：10%；
-khtml边界半径：10%；
背景：#eee；
文本对齐：居中；
}

您需要使用

行

类。请参阅此处的引导文档，记住您可以结合类来微调较小设备上的布局

e、 g