Как реализовать container-fluid в container-fluid?

Question

[game802]

Доброй ночи уважаемые знатоки. Хотел бы задать вам вопрос по поводу реализации данной фичи. Уже всю голову себе поломал.... но решения так откопать у меня не получилось.

Есть footer > его background растягивается по ширине экрана container-fluid'om
В footer'e все разделено на колонки col-md-3 в каждую из которых помещена та или иная информация.

<footer>
    <div class="container-fluid">
        <div class="row footer-back">
            <div class="container">
                <div class="footer">
                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

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

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

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li>
                                <ul class="social">
                                    <li></li>
                                    <li></li>
                                </ul>
                            </li>

                            <li class="sale">Мы принимаем к оплате</li>
                            <li>
                                <ul class="sale-card">
                                    <li><img src="src/images/png/visa.png" alt=""></li>
                                    <li><img src="src/images/png/mastercard.png" alt=""></li>
                                    <li><img src="src/images/png/yandexmoney.png" alt=""></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

Не совсем понимаю как container-fluid засунуть в container-fluid, для того, чтобы растягивалась эта полоса.
Может быть я что-то делаю не так? Спасибо!

Comments

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

[Андрей Б.]

https://jsfiddle.net/p82tk03s/

Comments

[game802]

Большое спасибо за ответ. Решили отказаться, ввиду того, что элемент вылезает из контейнера

[Андрей Б.]

HackOwnB Это никак не повлияет на верстку, потому что родителю указан overflow hidden. Но дело ваше.

Answer 2

[Алексей Голягин]

Конкретно в вашем случае примерно вот так:

<footer>
 <div class="container-fluid">
        <div class="row footer-back">
            <div class="container">
                <div class="footer">
                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

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

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

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li>
                                <ul class="social">
                                    <li></li>
                                    <li></li>
                                </ul>
                    </div> 
					
			    </div>
		    </div>
		</div>
		
		<div class="container-fluid">
			<p>Мы принимаем к оплате</p>
                <ul class="sale-card">
                    <li><img src="src/images/png/visa.png" alt=""></li>
                    <li><img src="src/images/png/mastercard.png" alt=""></li>
                    <li><img src="src/images/png/yandexmoney.png" alt=""></li>
                </ul>
        </div>
    </div>
</footer>

А если упростить, то вот так:

<footer class="footer-back">
 <div class="container">
  <div class="row">
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>				
  </div><--/row-->
 </div><--/container-->
 <div class="container-fluid">
  <p>Мы принимаем к оплате</p>
  <ul class="sale-card">
    <li><img src="src/images/png/visa.png" alt=""></li>
    <li><img src="src/images/png/mastercard.png" alt=""></li>
    <li><img src="src/images/png/yandexmoney.png" alt=""></li>
   </ul>
 </div><--/container-fluid-->
</footer>

Ну и соответственно css под свои нужды

Comments

[game802]

Да, большое спасибо за ответ!

[Алексей Голягин]

HackOwnB: Пожалуйста!