ipadでブートストラップカラムがコンテナの途中に出ている

Question

4つのブートストラップカラムを並べて整列しようとしています。 ipadの風景ビューでは、2つずつ並べて表示されます。しかしipadの肖像画では、第3列が下に行く。私は一日のうちに何時間も過ごして、これが正しく運ばれるように努力しました。

誰もこのことについて私にアドバイスできますか？

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

更新

私だけなので、これは小さなビューで[OK]を探していますが、あなたは下のスクリーンショットで大きな意見のための継続的な問題を見ることができる今col-xs-12 col-md-3を使用しています。

ここでは問題のスクリーンショットが表示されていますが、表示されているように、列の1つが他のものの下にプッシュされています。

Answer 1

コンテナはBEFORE class = "row"である必要があります。列チームロードには独自の行が必要です。

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