DIV行和HR超出了容器（引导程序）

Question

Hey I have a DIV and a HR pushing out of their Container. 嘿，我有一个DIV和一个HR从他们的容器中推出。 I've tried several different fixes, but nothing seems to work. 我尝试了几种不同的修复程序，但似乎没有任何效果。 I've placed everything in a Fiddle so you can take a look at what I'm talking about. 我把所有东西都放在小提琴中，这样您就可以看看我在说什么。 Any help would be appreciated. 任何帮助，将不胜感激。

 body { margin: 0; padding: 0; } .img { float: left; width: 100px; height: 100px; position: relative; top: 0; left: 0; } .copy { position: relative; float: left; margin-left: 10px; } .leadMargin { margin-left: 10px; postion: relative; } .hr { clear: both; border: 3px solid #f5f5f5; margin-top: 110px; margin-right: 100px; position: relative; } .noMargin { margin: 0; } .position-relative { position: relative; } .position-absolute { position: absolute; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <body> <div class="container-fluid"> <h1 class="">Post Block</h1> <hr> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-5"> <img src="http://www.placehold.it/400X200" class="img-responsive" alt="placeholder image" /> <p class="lead">Responsive Design</p> <p>Bacon ipsum dolor amet beef ribs turkey ut et cillum, capicola culpa turducken t-bone. Adipisicing officia pork loin, nulla andouille in eu capicola. Landjaeger pork chop sed kielbasa boudin aliqua. Salami pork ground round, jerky fatback ut eiusmod. Nisi ball tip do pig shankle turducken. Velit nisi t-bone pork tail corned beef salami pancetta cupidatat sirloin eu sint jowl. Qui cow voluptate pastrami.</p> </div> <div class="col-sm-5 col-md-5"> <div class="container-fluid"> <div class="row"> <img src="http://www.placehold.it/100x100" class="img " alt="lady with senior lady" /> <div class="col-sm-5 col-md-5 "> <p class="lead noMargin">New Collection of Shortcodes</p> <p>Landjaeger pork chop sed kielbasa boudin aliqua. Salami pork ground round, jerky fatback ut eiusmod. Nisi ball tip do pig shankle turducken.</p> </div> <hr class="hr"> </div> <div class="row position-relative"> <img src="http://www.placehold.it/100x100" class="img" alt="lady with senior lady" /> <div class="col-sm-5 col-md-5"> <p class="lead noMargin">New Collection of Shortcodes</p> <p>Landjaeger pork chop sed kielbasa boudin aliqua. Salami pork ground round, jerky fatback ut eiusmod. Nisi ball tip do pig shankle turducken.</p> </div> <hr class="hr"> </div> <div class="row"> <img src="http://www.placehold.it/100x100" class="img" alt="lady with senior lady" /> <div class="col-sm-5 col-md-5"> <p class="lead noMargin">New Collection of Shortcodes</p> <p>Landjaeger pork chop sed kielbasa boudin aliqua. Salami pork ground round, jerky fatback ut eiusmod. Nisi ball tip do pig shankle turducken.</p> </div> <hr class="hr"> </div> </div> </div> </div> </div> </body>

Thanks in advance. 提前致谢。 Kyle 凯尔

Answer 1

It was the double container classes. 这是双重容器类。 I had <div class="container container-fluid"> . 我有<div class="container container-fluid"> 。 When I removed the first container class the <HR> s started behaving. 当我删除第一个容器类时， <HR>开始运行。

DIV行和HR超出了容器（引导程序）

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-02-11 19:18:58

DIV行和HR超出了容器（引导程序）

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-02-11 19:18:58

解决方案1
0 已采纳 2016-02-11 19:18:58