2011-08-25 17 views
28

मैं एक त्वरित कुछ पन्नों के लिए ट्विटर की बूटस्ट्रैप उपयोग करने के लिए कोशिश कर रहा हूँ के साथ इस मुद्दे प्रतिपादन। मैं जैसे वे http://twitter.github.com/bootstrap/पाठ इनपुट ट्विटर बूटस्ट्रैप

मेरे एचटीएमएल पर कर समस्याओं पाठ फ़ील्ड हो रही रेंडर करने के लिए हो रही है की तरह

<div class="clearfix"> 
    <label for="unit">unit</label> 
    <div class="input"> 
     <input class="xlarge" id="unit" name="unit" type="text" value="" /> 
    </div> 
</div> 

कौन सा प्रासंगिक सीएसएस वर्गों है कि मैं डेमो पृष्ठ पर दिखाई देने वाले सभी प्रतीत हो रहा है लग रहा है। हालांकि, मेरे टेक्स्ट इनपुट फ़ील्ड इनपुट क्षेत्र के साथ बहुत छोटे लंबवत प्रस्तुत करते हैं, इसलिए कर्सर और टेक्स्ट इनपुट क्षेत्र की निचली सीमा के साथ ओवरलैप करते हैं। यह Win7 पर नवीनतम क्रोम के साथ है।

enter image description here

उत्तर

58

यह व्यवहार भी जब doctype को गलत तरीके से लिखा गया शुरू हो रहा है। मेरे मामले में, <!DOCTYPE> (गलत) <!DOCTYPE HTML> को तय किया गया था और समस्या दूर चला गया।

+0

यह भी ध्यान में रखें (मेरे साथ हुआ) कि DOCTYPE को आपके पृष्ठ की पहली चीज़ के रूप में आउटपुट किया जाना चाहिए। मेरे पास डीबग जानकारी है जो DOCTYPE से पहले लिखा गया था जिसके परिणामस्वरूप आपने अपने प्रश्न में वर्णित वही प्रभाव डाला था। – patrick

5

यह व्यवहार जब दस्तावेज़ सबसे बाहरी स्तर पर <html> टैग का अभाव देखा जाता है। एक टेम्पिंग प्रक्रिया के माध्यम से अपना टेम्पलेट डालने के बाद, ऐसा लगता है कि यह चाहिए। धन्यवाद नोटपैड ++।

9

http://twitter.github.com/bootstrap/scaffolding.html

आवश्यक है एचटीएमएल 5 doctype बूटस्ट्रैप HTML तत्वों और सीएसएस गुण एचटीएमएल 5 doctype के उपयोग की आवश्यकता है कि का उपयोग करता है। अपनी परियोजना में प्रत्येक बूटस्ट्रैप पेज की शुरुआत में इसे शामिल करना सुनिश्चित करें।

<!DOCTYPE html> 
<html lang="en"> 
    ... 
</html> 
2

मैं एक ही समस्या थी, लेकिन मेरे मामले में यह फ़ाइलों में एक असंगत पाठ एन्कोडिंग होने की वजह से किया गया था। कुछ फ़ाइलें, बीओएम (बाइट क्रम चिह्न) बिना UTF-8 में एन्कोड किया गया, जबकि अन्य फ़ाइलों बीओएम साथ UTF-8 में एन्कोड किया गया शामिल थे। मैंने बीओएम के बिना सभी फाइलों को यूटीएफ -8 में स्विच किया और यह सही तरीके से काम किया।

-1

मेरे फ़ाइल Windows के भीतर बनाया गया है और मैं एक ऐसी ही समस्या थी, अर्थात ऊंचाई बहुत छोटा तो descenders छोटा कर दिया गया था। मेरी फ़ाइल में कुछ PHP हैं जो पहले एचटीएमएल के बाद पहली लाइन हैं। सभी टिप्पणियों को पढ़ने के बाद, मैं PHP और ऊंचाई में वृद्धि हुई के आगे शीर्ष करने के लिए अपने (2 लाइनों) ले जाया गया ... इसलिए समस्या हल हो गई। ऐसा प्रतीत होता है कि DOCTYPE किसी भी PHP से पहले भी शुरुआत में होना चाहिए।

+0

परिणामी HTML में 'DOCTYPE' पहली पंक्ति होना चाहिए। लेकिन इसका मतलब यह नहीं है कि किसी भी PHP से पहले होना चाहिए। आपको बस यह सुनिश्चित करने की ज़रूरत है कि PHP कोई आउटपुट उत्पन्न नहीं करता है (खाली रेखा या यहां तक ​​कि स्पेस कैरेक्टर भी)। आप PHP का उपयोग करके 'DOCTYPE' भी उत्पन्न कर सकते हैं। –

0

की जगह class="x-large" रहे हैं: class="input-block-level"

0

मेरे मामले में:
- मैं एक रूप
में इनपुट पाठ था - यह फ़ायरफ़ॉक्स में काम किया है और क्रोम

में काम नहीं किया

मैं द्वारा इस तय बूटस्ट्रैप सीएसएस में रेखा-ऊंचाई को ओवरराइड करना। पहले यह इस तरह था:

line-height: inherit; 

और जब मैं अपने सीएसएस में इसे बदल (इसलिए यह बूटस्ट्रैप सीएसएस ओवरराइड करता है):

line-height: normal; 

यह काम किया!


लोग हैं जो इस को देखते हैं और पता नहीं है कि मैं क्या बारे में, प्रेस F12 बात कर रहा हूँ और अपने पाठ बॉक्स के लिए जाने के लिए।
अब शैलियों टैब में यू देखेंगे:

input, button, select, textarea { 
    font-family: inherit; 
    font-size: inherit; 
    font-height: inherit; 
} 

एक है कि आप ओवरराइड करना चाहते है।

0

सभी के लिए धन्यवाद, यह मेरी मदद करता है।
मुझे इस समस्या का भी सामना करना पड़ता है, अन्य उपयोगकर्ता की मदद करने के लिए मैं अपनी यात्रा साझा करता हूं कि मैं इसे कैसे हल करता हूं। समस्या इस तरह दिखती है: enter image description here

यह समस्या फ़ायरफ़ॉक्स में आती है जो क्रोम में उचित दिखती है।

मैं समाधान कैसे पाया:

  • मैं जानता हूँ कि आपको लगता है कि इस सीएसएस का अनुकूलन के साथ समस्या यह है कर रहे हैं। या इसके पीछे उचित सीएसएस नहीं है।
  • मैं बूटस्ट्रैप का उपयोग कर रहा हूं तो दूसरा विचार दिमाग में आता है कि इनपुट बॉक्स में उचित कक्षा स्थान नहीं है।
  • जब मैं इस प्रश्न पर आया और उत्तर पढ़ने शुरू कर दिया तो उन्होंने सुझाव दिया कि <!DOCTYPE html> के साथ समस्या मुझे विश्वास नहीं है, लेकिन मैंने उस पृष्ठ को देखना शुरू कर दिया।
  • मैं Firefox में भी स्रोत देखें के साथ जांच लेकिन वर्तमान है कि वहाँ <!DOCTYPE html>
  • अचानक मैं फ़ायरबग एचटीएमएल पर देखने और वहाँ वास्तव में कोई DOCTYPE है यहाँ, जबकि अन्य सभी पृष्ठों में यह आ रहा है आता है।

अब मुझे लगता है कि ऐसा क्यों हुआ, इसके पीछे कारण।
फिर मैं jsp पृष्ठों को देखता हूं। यह मेरे मामले में समस्या है, किसी को शरीर से पहले अन्य जेएसपी पेज शामिल है।

इस हाइलाइट सहायता की आशा करें।