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

---

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

---

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

<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 style="width: 100%; color: black; height: 1px; background-color:black;" />

---

쓰는 대신

<hr>

쓰다

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

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

---

부트 스트랩의 때문이다 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 : transparent를 추가하면 더 좋아 보일 것이라고 생각합니다.

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

참고 URL : https://stackoverflow.com/questions/11577712/hr-tag-in-twitter-bootstrap-not-functioning-correctly