html - Bootstrap 列在 ipad 肖像中向下并超出容器

Question

我正在尝试并排对齐 4 个 Bootstrap 列。在 ipad 横向 View 中，它们是两两并排的。但是在 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，所以这在较小的 View 中看起来没问题，但您可以在下面的屏幕截图中看到较大 View 的持续问题。

这是问题的屏幕截图，如您所见，其中一列被推到其他列的下方。

Answer 1

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

<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>