बूटस्ट्रैप के साथ एक div के चारों ओर एक गोलाकार सीमा कैसे बनाएँ?

Question

मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं। इनपुट प्रकार = टेक्स्ट तत्व शांत हैं। अब मैं एक div तत्व के चारों ओर एक समान गोलाकार सीमा बनाना चाहता हूँ। मैंने जो भी कोशिश की है वह बदसूरत लगती है, क्या यह बूटस्ट्रैप 3 के साथ संभव है?

अग्रिम

Answer 1

आप एक बूटस्ट्रैप इनपुट, का उपयोग करने का @James Lawruk के सुझाव का अनुकरण करने की कोशिश कर रहे हैं के बाद से। form-control इसे करने का सबसे आसान तरीका है।

लेकिन अगर आप सीखना चाहते हैं कि स्टाइल को अनुकरण करने के लिए आप कहीं और देखें (जो आपको चाहिए), तो आपको .form-control में उपयोग किए गए सीएसएस का निरीक्षण करने की आवश्यकता है (यदि क्रोम पर, राइट-क्लिक करें और "तत्व का निरीक्षण करें"), प्रासंगिक स्टाइल की प्रतिलिपि बनाएँ, और आवेदन करने के लिए अपनी खुद की कक्षा बनाएं।

इस मामले में:

.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 देखो, बस अपने div करने के लिए एक .form-control वर्ग को जोड़ने बनाने के लिए।

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

Bootstrap Panels भी देखें। चूंकि divs फॉर्म नियंत्रण नहीं हैं, इसलिए पैनल कोनों को गोलाकार किया जाता है और divs के लिए अधिक उपयुक्त होते हैं।

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

Here is a JSFiddle demo of both options.