बूटस्ट्रैप के साथ फील्ड्स लीजेंड का उपयोग करें

Question

मैं अपने JSPपेज के लिए बूटस्ट्रैप का उपयोग कर रहा हूं ।

मैं का उपयोग करना चाहते <fieldset>हैं और <legend>मेरी फार्म के लिए। यह मेरा कोड है।

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label input-label" for="startTime">Start :</label>
        <div class="controls bootstrap-timepicker">
            <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

सीएसएस है

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
}

मुझे इस तरह से आउटपुट मिल रहा है

मैं निम्नलिखित तरीके से आउटपुट चाहता हूं

मैंने जोड़ने की कोशिश की

border:none;
width:100px;

करने के लिए legend.scheduler-borderसीएसएस में। और मुझे अपेक्षित आउटपुट मिल रहा है। लेकिन समस्या यह है कि मैं <fieldset>दूसरे क्षेत्रों के लिए एक और जोड़ना चाहूंगा । उस समय किंवदंती में पाठ की चौड़ाई एक समस्या है क्योंकि यह की तुलना में लंबा है 100px।

इसलिए मैं जैसा मैंने उल्लेख किया है, मैं आउटपुट पाने के लिए क्या करूंगा? (किंवदंती पाठ के बिना)

Comments

आपके द्वारा साझा किया गया कोड ठीक काम करता है। यहाँ एक फिडेल है

— मेंनो

@ Aquillo आपका फ़िडेल बूटस्ट्रैप का उपयोग नहीं कर रहा है।

— जेम्स डोनली

@JamesDonnelly ने यह भी नोट किया कि यह बूटस्ट्रैप के कारण होता है;)

— मेनो

मुझे लगता है कि आपको बूटस्ट्रैप के पैनल का उपयोग करने पर विचार करना चाहिए। इसमें फील्डसेट और लीजेंड की तरह बहुत समान व्यवहार है, लेकिन अधिक स्टाइलिश।

— चंद्र डेस्टिआवान

Answer 1

ऐसा इसलिए है क्योंकि बूटस्ट्रैप डिफ़ॉल्ट रूप से legendतत्व की चौड़ाई 100% निर्धारित करता है । आप इसे अपने legend.scheduler-borderउपयोग के लिए बदलकर भी ठीक कर सकते हैं:

legend.scheduler-border {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}

JSFiddle उदाहरण ।

आपको यह भी सुनिश्चित करना होगा कि आपके कस्टम स्टाइलशीट को बूटस्ट्रैप के बाद जोड़ा जा रहा है ताकि आपके स्टाइल को ओवरराइड करने से रोका जा सके - हालाँकि यहाँ आपकी शैलियों में उच्च विशिष्टता होनी चाहिए।

आप margin-bottom:0;किंवदंती और विभक्त के बीच के अंतर को कम करने के लिए इसे भी जोड़ना चाह सकते हैं ।

Comments

Ftr: मेरे लिए बूटस्ट्रैप 3.3.6 भी एक सेट margin-bottom: 20px;पर legendहै, जो यह fieldset सीमा से ऊपर धक्का दे दिया, बजाय लाइन पर रखकर की। margin-bottom: 0;कस्टम पर सेट करना legend.scheduler-borderजो आसानी से तय हो गया।

— dtk

Answer 2

बूटस्ट्रैप 4 में, उस क्षेत्र पर एक सीमा रखना बहुत आसान है जो किंवदंती के साथ मिश्रित होता है। इसे प्राप्त करने के लिए आपको कस्टम सीएसएस की आवश्यकता नहीं है, इसे इस तरह किया जा सकता है:

<fieldset class="border p-2">
   <legend  class="w-auto">Your Legend</legend>
</fieldset>

जो इस तरह दिखता है:

Comments

w-auto बूटस्ट्रैप 4.0 में उपलब्ध नहीं है, लेकिन यह 4.1+ में उपलब्ध है

— dlauzon

Answer 3

मुझे यह समस्या थी और मैंने इस तरह से हल किया:

fieldset.scheduler-border {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.scheduler-border {
    width: auto !important;
    border: none;
    font-size: 14px;
}

Answer 4

मेरे पास एक अलग दृष्टिकोण था, इसे थोड़ा अधिक समृद्ध दिखाने के लिए बूटस्ट्रैप पैनल का उपयोग किया। बस किसी की मदद करना और जवाब सुधारना।

.text-on-pannel {
  background: #fff none repeat scroll 0 0;
  height: auto;
  margin-left: 20px;
  padding: 3px 5px;
  position: absolute;
  margin-top: -47px;
  border: 1px solid #337ab7;
  border-radius: 8px;
}

.panel {
  /* for text on pannel */
  margin-top: 27px !important;
}

.panel-body {
  padding-top: 30px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-body">
      <h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
      <p> Your Code </p>
    </div>
  </div>
  <div>

यह नीचे लुक देगा।

नोट: हमें विभिन्न हेडर आकार का उपयोग करने के लिए शैलियों को बदलने की आवश्यकता है।

Answer 5

बस संक्षेप में उपरोक्त सभी सही उत्तरों को संक्षेप में प्रस्तुत करना चाहता था। क्योंकि मुझे यह जानने के लिए बहुत समय देना पड़ता था कि कौन सा उत्तर समस्या को हल करता है और क्या पर्दे के पीछे चल रहा है।

ऐसा लगता है कि बूटस्ट्रैप के साथ फ़ील्डसेट की दो समस्याएं हैं:

1. bootstrapकरने के लिए चौड़ाई सेट legendके रूप में 100%। यही कारण है कि यह शीर्ष सीमा से अधिक है fieldset।
2. के bottom borderलिए एक है legend।

इसलिए, हम सभी को इसे ठीक करने की जरूरत है जो कि लीजेंड की चौड़ाई को ऑटो पर सेट करता है:

legend.scheduler-border {
   width: auto; // fixes the problem 1
   border-bottom: none; // fixes the problem 2
}