부트 스트랩을 사용하여 div 주위에 둥근 테두리를 만드는 방법은 무엇입니까?

Question

부트 스트랩 3을 사용하고 있습니다. 입력 유형 = 텍스트 요소가 멋지다. 이제 div 요소 주위에 비슷한 둥근 테두리를 만들고 싶습니다. 시도한 모든 것이보기 흉한 것처럼 보입니다. 부트 스트랩 3에서 가능합니까? 사전

Answer 1

당신은 부트 스트랩 입력, 사용 @ 제임스 Lawruk의 제안을 모방하려는 때문에. form-control은 가장 간단한 방법입니다.

그러나 다른 곳에서 볼 수있는 스타일링을 에뮬레이션하는 방법을 배우려면 .form-control에 사용 된 CSS를 검사해야합니다 (Chrome의 경우 마우스 오른쪽 버튼을 클릭하고 "요소 검사"). 관련 스타일링을 복사하고 적용 할 고유 한 클래스를 만듭니다.

.form-control{ 
    display: block; 
    width: 100%; /* THIS */ 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #555; /* THIS */ 
    background-color: #fff; 
    background-image: none; 
    border: 1px solid #ccc; /* THIS */ 
    border-radius: 4px; /* THIS */ 
} 

이

.custom{ 
    width: 100%; 
    color: #555; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
} 

참고가된다 : 나는 또한 .form 제어하는 ​​등의 부착 몇 의사 클래스를 무시하고이 경우

초점을하지만, 의사 요소는 다른 목적을 위해 설계된 클래스를 적용하고 싶지 않은 또 다른 이유입니다.

Answer 2

에서

덕분에 신속하게 부트 스트랩 입력과 같은 사업부의 모습, 단순히 DIV에 .form-control 클래스를 추가 확인하십시오.

<div class="form-control">I am inside a div.</div> 

Bootstrap Panels도 확인하십시오. div는 양식 컨트롤이 아니기 때문에 둥근 모서리가 있고 div에 더 적합합니다.

<div class="panel panel-default"> 
    <div class="panel-body">I am inside a panel.</div> 
</div> 

Here is a JSFiddle demo of both options.