Bootstrap에서 테두리를 사용하는 방법

Bootstrap에서 테두리를 사용하는 방법

---

이 문제를 어떻게 해결할 수 있습니까? div에 테두리를 추가하면 div가 가운데 span12에 있지 않고 클래스가 가운데에 있지 않습니다.

테두리가있는 div를 중앙에 배치하고 싶습니다.

<div class="row" >
   <div class="span12" style="border: 2px solid black">
      <div class="row">
         <div class="span4">
            1
         </div>
         <div class="span4">
            2
         </div>
         <div class="span4">
            3
         </div>
      </div>
   </div>
</div>

---

안타깝게도 그것이 테두리가하는 일이며 요소가 차지하는 공간의 일부로 간주됩니다. 국경의 덜 알려진 사촌을 소개하겠습니다 : outline. 국경과 거의 동일합니다. 유일한 차이점은 레이아웃에서 공간을 차지하지 않고 요소의 4면 모두에 있어야한다는 점에서 상자 그림자처럼 작동한다는 것입니다.

http://codepen.io/cimmanon/pen/wyktr

.foo {
    outline: 1px solid orange;
}

---

Bootstrap 3부터는 Panel 클래스를 사용할 수 있습니다.

<div class="panel panel-default">Surrounded by border</div>

---

CSS에는 box-sizing.페이지에있는 요소의 전체 너비를 결정 하는 속성이 있습니다 . 기본값 content-box은 요소의 여백, 여백 또는 테두리를 포함하지 않는입니다.

따라서 a div를 가지고 width: 500px있고 20px패딩을 모두 설정하면 540px웹 사이트에서 차지합니다 (500 + 20 + 20).

이것이 문제의 원인입니다. Bootstrap은 위의 예와 같이 설정된 너비를 계산하며 이러한 항목에는 테두리가 없습니다. 부트 스트랩은 퍼즐처럼 서로 맞기 때문에 측면 중 하나에 테두리를 추가하면 총 너비가 501px (위의 예에서 계속됨)가되고 레이아웃이 깨집니다.

이 문제를 해결하는 가장 쉬운 방법은 box-sizing. 사용할 값은 box-sizing: border-box입니다. 여기에는 상자 요소 의 패딩 과 테두리가 포함됩니다 . 여기에서 상자 크기에 대한 자세한 내용을 읽을 수 있습니다.

이 솔루션의 문제점은 IE8 +에서만 작동한다는 것입니다. 결과적으로 더 깊은 IE 지원이 필요한 경우 테두리를 고려하여 부트 스트랩 너비를 재정의해야합니다.

새 너비를 계산하는 방법의 예를 제공하려면 부트 스트랩이 요소에 설정 한 너비를 확인하는 것부터 시작하십시오. a span6이고 너비가 있다고 가정 해 봅시다 320px(순전히 가설 적이며 span6의 실제 너비는 Bootstrap의 특정 구성에 따라 달라집니다). 오른쪽에 20px 패딩이있는 단일 테두리를 추가하려면이 CSS를 스타일 시트에 작성합니다.

.span6 {
  padding-right: 20px;
  border-right: 1px solid #ddd;
  width: 299px;
 }

새 너비는 다음과 같이 계산됩니다.

old width - padding - border

---

원하는 크기에 따라 그리드 시스템과 함께 (또는 제외) divBootstrap의 내장 구성 요소 thumbnail클래스를 활용 하여 각 div항목 주위에 테두리를 만들 수 있습니다.

Bootstrap 웹 사이트의 다음 예제 는 사용하기 쉽고 특별한 추가 기능이 필요하지 않음을 보여줍니다 CSS.

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    ...
</div>

다음 div그리드 항목 을 생성합니다 .

또는 몇 가지 추가 콘텐츠를 추가합니다.

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p>
            <a href="#" class="btn btn-primary" role="button">Button</a>
            <a href="#" class="btn btn-default" role="button">Button</a>
       </p>
      </div>
    </div>
  </div>
</div>

다음 div그리드 항목 을 생성합니다 .

---

다른 사람들이 테두리 대 테두리 상자에 대해 언급 한 내용은 확실히 정확합니다. 그래도 사용자 정의 클래스를 만들지 않고도이 작업을 수행 할 수 있습니다. http://jsfiddle.net/panchroma/yfzdD/

HTML

<div class="container">
<div class="row" >
    <div class="span12">
       <div class="row">
        <div class="span4"> 1 </div>
        <div class="span4"> 2 </div>
        <div class="span4"> 3 </div>
        </div><!-- end nested row -->
    </div><!-- end span 12 -->

</div> <!-- end row -->
</div><!-- end container -->

CSS

.span12{
border:solid 2px black;
background-color:grey;  
}  

행운을 빕니다!

---

아마도 올바른 방법 은 아니지만 간단한 해결 방법은 테두리 대신 상자 그림자를 사용하는 것입니다. 이것은 그리드 시스템을 깨뜨리지 않습니다. 예를 들어, 귀하의 경우 :

HTML

<div class="container">
    <div class="row" >
        <div class="span12">
            <div class="row">
                <div class="span4">
                    1
                </div>
                <div class="span4">
                    2
                </div>
                <div class="span4">
                    3
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.span12{
    -moz-box-shadow: 0 0 2px black;
    -webkit-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
}

깡깡이

---

너비가 계산되는 방식으로 인해 레이아웃이 깨지기 때문에 범위에 테두리를 추가 할 수 없습니다 : width = border + padding + width. 컨테이너가 940px이고 범위가 940px이기 때문에 2px 테두리 (총 4px)를 추가하면 중앙에서 벗어난 것처럼 보입니다. 해결 방법은 4px 테두리 (원본-4px)를 포함하도록 너비를 변경하거나 내부에 2px 테두리를 만드는 다른 div를 포함하는 것입니다.

---

주변에 기본 테두리가 필요한 경우 부트 스트랩 우물을 사용하면됩니다.

예를 들어 아래 코드 :

<div class="well">Basic Well</div>

참고 URL : https://stackoverflow.com/questions/15328679/how-to-use-border-with-bootstrap