Twitter Bootstrap의 <hr> 태그가 제대로 작동하지 않습니까?

내 코드는 다음과 같습니다.

<div class="container">
<div>
<h1>Welcome TeamName1</h1>
  asdf
  <hr>
  asdf

</div>
</div> <!-- /container -->

hr 태그가 예상대로 작동하지 않는 것 같습니다. 선을 그리는 대신 다음과 같이 간격을 만듭니다.

의 CSS 속성 <hr>은 다음 과 같습니다.

hr {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #EEEEEE -moz-use-text-color #FFFFFF;
  border-style: solid none;
  border-width: 1px 0;
  margin: 18px 0;
}

매우 밝은 회색과 18px의 세로 여백이있는 1px 가로선에 해당합니다.

클래스 <hr>가 <div>없는 내부 이기 때문에 너비는<div>

당신이 좋아하면 <hr>될 전체 폭을 대체 <div>와 함께<div class='row'><div class='span12'> (닫는 태그를 따라와).

다른 것을 기대하는 경우 코멘트를 추가하여 기대하는 것을 설명하십시오.

쓰는 대신

<hr>

쓰다

<hr class="col-xs-12">

그리고 정상적으로 전체 너비로 표시됩니다.

HR 배경색을 다음과 같이 검정색으로 설정하여이 문제를 해결했습니다.

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />

부트 스트랩의 때문이다 DEFAULT의 CSS 에 대한이 <hr />있습니다 :

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

이 두 줄 사이에 40px 간격을 만듭니다.

따라서 <hr />페이지의 특정 여백 스타일 을 변경하려면 다음과 같이 시도 할 수 있습니다. ::

<hr style="margin-bottom:5px !important; margin-top:5px !important; " />

<hr /> 색상 및 테두리 유형 또는 두께와 같은 페이지의 특정 모양 / 다른 스타일을 변경하려면 다음과 같이 시도 할 수 있습니다.

<hr style="border-top: 1px dotted #000000 !important; " />

<hr />귀하의 페이지에서 모두

<style>
   hr {
       border-top: 1px dotted #000000 !important;
       margin-bottom:5px !important; 
       margin-top:5px !important;
   }
</style>

기본적 hr으로 Twitter Bootstrap CSS 파일 의 요소는 위쪽 및 아래쪽 여백이 18px. 그것이 격차를 만드는 것입니다. 간격을 더 작게하려면 hr요소의 여백 속성을 조정해야합니다 .

귀하의 예에서 다음과 같이하십시오.

.container hr {
margin: 2px 0;
}

border-color를 추가하면 더 좋아 보일 것이라고 생각합니다.

<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />

테두리를 투명하게하지 않으면 흰색이되고 항상 좋은 것 같지는 않습니다.

인라인 스타일을 다음과 같이 편집하여 hrTag를 사용자 지정할 수있었습니다.

<div class="row"> <!-- You can also position the row if need be. -->
<div class="col-md-12 col-lg-12"><!-- set width of column I wanted mine to stretch most of the screen-->
<hr style="min-width:85%; background-color:#a1a1a1 !important; height:1px;"/>
</div>
 </div>

hrTag는 이제 더 두껍고 더 잘 보입니다. 또한 더 어두운 회색입니다. 부트 스트랩 코드는 실제로 매우 유연합니다. 스 니펫이 위에 설명 된 것처럼 인라인 스타일 또는 사용자 정의 코드를 사용할 수 있습니다. 이것이 누군가를 돕기를 바랍니다.

다음 중 하나를 원할 수 있으므로 Bootstrap 레이아웃에 해당합니다.

<div class="col-xs-12">
    <hr >
</div>

<!-- or -->

<div class="col-xs-12">
    <hr style="border-style: dashed; border-top-width: 2px;">
</div>

<!-- or -->

<div class="col-xs-12">
    <hr class="col-xs-1" style="border-style: dashed; border-top-width: 2px;">
</div>

DIV그리드 요소가 포함되어 있지 않으면 레이아웃이 다른 장치에서 제동 될 수 있습니다.