Блог

Главная - Вопросы по программированию - Столбец Bootstrap проходит далеко вниз и выходит из контейнера в портрете ipad

Столбец Bootstrap проходит далеко вниз и выходит из контейнера в портрете ipad

#html #css #twitter-bootstrap #media-queries

#HTML #css #twitter-bootstrap #медиа-запросы

Вопрос:

Я пытаюсь выровнять 4 столбца bootstrap рядом. В альбомной ориентации ipad они расположены рядом, два на два. Но на ipad portrait 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>

Обновить

Я использую col-xs-12 col-md-3 только сейчас, поэтому это выглядит нормально в меньших представлениях, но вы можете увидеть текущую проблему для больших представлений на скриншоте ниже.

вот скриншот проблемы, как вы можете видеть, один из столбцов помещен ниже других. введите описание изображения здесь

Комментарии:

1. Почему у вас есть col-md-6 и col-md-3 в теге class? Это может быть вашей проблемой.

2. Привет, нет, дело не в этом, это была опечатка

3. Можете ли вы включить скриншот проблемы? Я не до конца понимаю это.

4. Привет, я добавил скриншот, это работает нормально для небольших просмотров, но в больших представлениях столбцы складываются, как на скриншоте.

5. Я не у своего компьютерного банкомата. Но попробуйте использовать div вокруг cv-box div, но дайте этому div класс col- * и желаемое заполнение. Я надеюсь, что я был ясен.

Ответ №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>