2016-05-24 3 views
1

Я новичок в бутстрапе, и я хочу знать, помещаю ли столбцы в другой столбец начальной загрузки, как я могу его вычислить?Бутстрап-столбцы с другими столбцами внутри

Например, под моим первым col-md-6 должен быть «внутри» классов. Могу ли я помещать столбцы начальной загрузки в эти два окна? Если да, как я могу вычислить количество столбцов? Я хочу, чтобы эти tho-боксы были рядом друг с другом, например, вы поместили оба поплавка влево, но с помощью бутстрапа, если это возможно.

<div class="container-fluid"> 
    <div class=" left-side col-md-6"> 
    <div class="page inside"> 
     <h1>This Is A Title</h1> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
    </div> 
    <div class="page inside"> 
     <h1>This Is A Title</h1> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
    </div> 
    <div class=""> 
      <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin magna in aliquam hendrerit. Duis facilisis ipsum in scelerisque convallis. Vestibulum eget vehicula arcu. Suspendisse viverra accumsan euismod. Maecenas ac felis at mi pellentesque porta. Vestibulum sed metus et enim molestie sodales. Etiam auctor magna ac tincidunt dignissim. </p> 
      <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin magna in aliquam hendrerit. Duis facilisis ipsum in scelerisque convallis. Vestibulum eget vehicula arcu. Suspendisse viverra accumsan euismod. Maecenas ac felis at mi pellentesque porta. Vestibulum sed metus et enim molestie sodales. Etiam auctor magna ac tincidunt dignissim. </p> 
     </div> 
    </div> 


    <div class="middle-side col-md-3"> 
    <div class="page"> 
     <h1>This Is A Title</h1> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
    </div> 
    <div class="page"> 
     <h1>This Is A Title</h1> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
    </div> 
    <div class="page"> 
     <h1>This Is A Title</h1> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
     <div class="page-text"> 
      <p>This is the price <span>$735</span></p> 
     </div> 
    </div> 
    </div> 
</div> 

ответ

0

Twitter Bootstrap является 12 column рамки, так что все столбцы в строке следует добавить до 12

Так да, вы можете добавить столбцы внутри других столбцов до тех пор, как вы заключаете новые столбцы в новый row div вот так:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="row"> <!-- new row added here --> 
       <div class="col-md-3"> 
        .... 
       </div> 
       <div class="col-md-9"> 
        <div class="row"> <!-- even another row for new columns --> 
         <div class="col-md-5"> 
          .... 
         </div> 
         <div class="col-md-7"> 
          .... 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="col-md-6"> 
      .... 
     </div> 
    </div> 
</div> 
+0

Это идеальный вариант. Спасибо Эндрю –

+0

Рад, что я помогу Джону. Отметьте это как правильный ответ и поддержите его, если это поможет вам в решении вашей проблемы. Ура !! –

+0

Через 1 минуту, потому что я не могу голосовать до 4 минут. –

Смежные вопросы