Укладка нижнего колонтитула с бутстрапом

Question

У меня возникло несколько проблем, требующих типа сетки, в которой я нуждаюсь в данный момент. Это нижний колонтитул, поэтому я хочу, чтобы он составлял 12 столбцов, два сложенные друг на друга. Каждый из них будет содержать свой собственный контент. Но в «конце» этой сетки я хочу большой логотип. Вот пример.

Как вы можете видеть, что есть 3 колонки. Я бы хотел, чтобы их было 4, но четвертый должен быть высотой 100%, а не двумя, как остальные. Вот что я до сих пор.

<footer> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-3">1</div> 

     <div class="col-md-3">2</div> 

     <div class="col-md-3">3</div> 
    </div> 

    <div class="row"> 
     <div class="col-md-3">1</div> 

     <div class="col-md-3">2</div> 

     <div class="col-md-3">3</div> 
    </div> 
    </div> 
</footer> 

Answer 1

Iam надеясь это то, что вы ищете:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <div class="row"> 
         <div class="col-md-12">1 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">1 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="row"> 
         <div class="col-md-12">2 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">2 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="row"> 
         <div class="col-md-12">3 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12">3 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" /> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Как насчет попробовать это для md экрана ..

HTML

.first-row { 
 
    border: 1px solid red; 
 
} 
 
.second-row { 
 
    border: 1px solid green; 
 
} 
 
.image-column { 
 
    border: 1px solid blue; 
 
}

<footer> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-9"> 
 
     <div class="row first-row"> 
 
      <div class="col-md-4">1</div> 
 

 
      <div class="col-md-4">2</div> 
 

 
      <div class="col-md-4">3</div> 
 
     </div> 
 

 

 
     <div class="row second-row"> 
 
      <div class="col-md-4">1</div> 
 

 
      <div class="col-md-4">2</div> 
 

 
      <div class="col-md-4">3</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-md-3 image-column"> 
 
     <img src="..." , alt="..." /> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</footer>

Answer 3

Я думаю, это то, что вы хотите ...

<footer> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-3">1</div> 
     <div class="col-md-3">2</div> 
     <div class="col-md-3">3</div> 
     <div class="col-md-3"> 
      <div class="row"> 
       <div class="col-md-12"><img src="" class="img-responsive"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 4

Попробуйте следующий код

DEMO

<footer> 
    <div class="container"> 
     <div class="row"> 

     <div class="col-md-9"> 
      <div class="row"> 
      <div class="col-md-4">1</div> 
      <div class="col-md-4">2</div> 
      <div class="col-md-4">3</div> 
      </div> 

      <div class="row"> 
      <div class="col-md-4">1</div> 
      <div class="col-md-4">2</div> 
      <div class="col-md-4">3</div> 
      </div> 
     </div> 

     <div class="col-md-3">Img</div> 

    </div> 
    </div> 
</footer>