Элемент полной ширины hr в Bootstrap 3

Question

Я новичок в бутстрапе, и мне интересно, как мы можем дать элементу полную ширину экрана? например, у меня есть элемент <hr>, который я хочу, чтобы его ширина занимала весь экран.

Я замечаю, что row принимает -15px margin-left и margin-right, как мы можем удалить эту маржу, не затрагивая другие строки на веб-сайте?

Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (Полный экран для лучшего обзора)

HTML:

<div class="row"> 
     <div class="content"> 
      <div class="container"> 
       <h1>Welcome to my website!</h1> 
      </div> 
      <div class="container-fluid"> 
       <hr> 
      </div> 
     </div> 
</div> 

Спасибо!

Answer 1

Вам просто нужно вынести его из контейнера.

<div class="container"> 
    <div class="row"> 
    <!-- STUFF --> 
    </div> 
</div> 
<hr> <!----- here --> 
<div class="container"> 
    <div class="row"> 
    <!-- STUFF --> 
    </div> 
</div>