बूटस्ट्रैप - अच्छी तरह से

Question

पर किंवदंती जोड़ना मैं वर्तमान में ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, जो अच्छी तरह से काम कर रहा है, लेकिन मैं एक फॉर्म में उपयोग किए जाने वाले "अच्छी तरह से" तत्वों में एक किंवदंती जोड़ना चाहता हूं (ताकि मेरे पास एकाधिक कुएं हो सकें, एक फॉर्म पर उप-वर्गों को दर्शाता है)।

क्या मेरी प्रपत्र अब की तरह लग रहा है का एक उदाहरण:

मैं एक किंवदंती जोड़ने के लिए इतना है कि मैं नीचे "विवरण" दो अलग-अलग वर्गों में हो सकता है शीर्षक, उदाहरण के लिए चाहते हैं, लेकिन वे क्या करने के लिए इंगित करने में सक्षम हो। एक किंवदंती ऐसा करने का सबसे अच्छा तरीका प्रतीत होता है।

एचटीएमएल के प्रासंगिक अनुभाग लगता है:

<form> 
    <div class="row"> 
     <div class="span6"> 
     <div class="nonboxy-widget"> 
      <div class="widget-head"> 
       <h5>Details</h5> 
      </div> 
      <div class="widget-content"> 
       <div class="widget-box"> 
        <div class = 'form-horizontal well'> 
         <fieldset> 
          <div class="control-group"> 
           <label class="control-label">Sale Type</label> 
           <div class="controls"> 

जब मैं या तो fieldset या वर्ग form-horizontal well यह बॉक्स के अंदर एक शीर्षक की तरह renders के साथ div को एक किंवदंती टैग को जोड़ने के लिए प्रयास, एक पसंद नहीं सामान्य एचटीएमएल किंवदंती।

कोड

<div class = 'form-horizontal well'> 
    <fieldset> 
    <legend>Details</legend> 
    <div class="control-group"> 

किसी को भी यह एक सामान्य कथा की तरह प्रस्तुत करना करने के लिए एक तरह से अनुशंसा कर सकते हैं, बॉक्स की सीमा पर के साथ

: ऐसा लगता है कि renders?

संपादित करें: Simbirsk से कोड के लिए धन्यवाद, मैं अब है:

यह बहुत करीब है, लेकिन है कि मैं क्या चाहता था कथा एक fieldset पर एक सामान्य html कथा की तरह लग रहे (करने के लिए था यानी यह सीमा में बैठने के लिए) के लिए, तो मैं करने के लिए सीएसएस बदल दिया है:

legend { 
padding: 0; 
margin-left: 10px; 
margin-bottom: -9px; 
border: 0; 
color: #999999; 
background-color: #333333; 
} 

लेकिन यह है कि इस के परिणामस्वरूप:

मैं कैसे सुनिश्चित कर सकता हूं कि अच्छी तरह से "ब्रेक" (पाठ के पीछे प्रदर्शित नहीं होता है) की सीमा सामान्य फ़ील्ड किंवदंती की तरह है?

संपादित करें 2: पहले जवाब देने के लिए संपादित करें के बाद, मैं अपने सीएसएस के लिए कोड आवेदन किया है और साथ समाप्त हो गया:

आप ध्यान देंगे इस मैं वह नहीं देख रहा था है - मैं अच्छी तरह से div की सीमा पर किंवदंती पाने की कोशिश कर रहा हूं, न कि फ़ील्ड पर (क्योंकि यह एक घोंसला वाला रूप है, एक कुएं के भीतर कई फ़ील्ड हो सकते हैं, इसलिए मैं सीमा को फ़ील्ड पर नहीं डाल सकता)।

मुझे लगता है कि ऊपर दिए गए कोड के साथ यह हासिल किया गया है, केवल एक ही समस्या सीमा में एक ब्रेक डालने वाली थी जहां पौराणिक कथा है - क्या यह किंवदंती पाठ की पृष्ठभूमि के लिए किसी प्रकार की अस्पष्टता के साथ किया जा सकता है, और थोड़ा पैडिंग का?

कोई और सुझाव?

धन्यवाद!

Answer 1

.wellfieldset पर रखें और बूटस्ट्रैप के legend और fieldset शैलियों को ओवरराइड करें।
एचटीएमएल

<form> 
    <fieldset class="well the-fieldset"> 
     <legend class="the-legend">Your legend</legend> 
     ... your inputs ... 
    </fieldset> 
</form> 

सीएसएस

.the-legend { 
    border-style: none; 
    border-width: 0; 
    font-size: 14px; 
    line-height: 20px; 
    margin-bottom: 0; 
} 
.the-fieldset { 
    border: 2px groove threedface #444; 
    -webkit-box-shadow: 0px 0px 0px 0px #000; 
      box-shadow: 0px 0px 0px 0px #000; 
} 

नोट: मैं पंक्तियाँ, फैला, नियंत्रण, आदि अपने लेआउट के अनुरूप करने के लिए उन्हें का प्रयोग करें जैसे बूटस्ट्रैप कक्षाएं ommited गए हैं।
संपादित करें: fieldset शैलियों को "रीसेट" शामिल करने के लिए परिवर्तित कोड।

Answer 2

यह मेरे लिए बूटस्ट्रैप में समूहबॉक्स के रूप में प्राप्त करने की कोशिश कर रहा था।

fieldset { 
 
    min-width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 
.well { 
 
    min-height: 20px; 
 
    padding: 19px; 
 
    margin-bottom: 20px; 
 
    background-color: #f5f5f5; 
 
    border: 1px solid #e3e3e3; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
} 
 
.well-legend { 
 
    display: block; 
 
    font-size: 14px; 
 
    width: auto; 
 
    padding: 2px 7px 2px 5px; 
 
    margin-bottom: 20px; 
 
    line-height: inherit; 
 
    color: #333; 
 
    background: #fff; 
 
    border: 1px solid #e3e3e3; 
 
    border-radius: 4px; 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 
 
}

<form> 
 
    <fieldset class="well"> 
 
    <legend class="well-legend">Group Box Legend</legend> 
 
    ... your inputs ... 
 
    </fieldset> 
 
</form>