在ipad纵向中，引导列从容器中走到很远的地方。

Question

我试图对齐4引导列并排。在ipad的风景画上，他们一分为二。但在ipad的肖像上，第三栏的内容却大大减少了。一天中，我花了太多的时间试图让它正常工作，却没有任何运气。

有人能给我提点建议吗？

​

@media only screen and (min-device-width: 768px) and (max-device- width: 1024px) {
  .cv-box {
    background: rgba(255, 255, 255, .5);
    margin-bottom: 50px;
    border-radius: 5px;
    margin-right: 15px;
    margin-left: 15px;
    float: left !important;
    width: 45% !important;
  }
}

<div class="row">
  <div class="col-sm-10 col-sm-offset-1 text-center">
    <h1 class="team-lead" id="team">The Team</h1>
  </div>
  <div class="container the-team">
    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

​

更新

我现在只使用col-xs-12 col-md-3，所以在较小的视图中看上去还行，但是在下面的屏幕截图中可以看到大视图的持续问题。

下面是问题的截图，正如您所看到的，其中一列被推入其他列的下方。

​

Answer 1

容器应该在class="row“之前。列team应该有自己的行。

<div class="container the-team">
<div class="row">
  <div class="col-sm-10 col-sm-offset-1 text-center">
    <h1 class="team-lead" id="team">The Team</h1>
  </div>
</div>
<div class="row">
    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>

    <div class="col-xs-12 col-md-3  cv-box">
      <h3>SomeName</h3>

      <img src="/assets/BOS.jpg" class="portfolio-img img-responsive">
      <p class="cv">ntelligentsia mumblecore ethical yr, four dollar toast cliche hexagon waistcoat kinfolk. Enamel pin chia tumeric trust fund. Fap sriracha hot chicken, squid affogato brunch pok pok chicharrones normcore la croix typewriter offal fam pabst umami.
        Helvetica activated charcoal whatever, butcher air plant kale chips scenester before they sold out mustache kitsch authentic bespoke fashion axe meggings.</p>
    </div>
</div>

​