मैं ट्विटर-बूटस्ट्रैप में टेक्स्टरेरा के कोल्स कैसे बदल सकता हूं?

Question

यदि मैं पंक्तियों का मान बदलता हूं, तो यह काम करता है। लेकिन यह डिफ़ॉल्ट कॉल पर रहता है जो भी मैं 'cols =>' के साथ सेट करता हूं। कॉलम चौड़ाई नहीं बदलेगी।

मैंने HTML स्रोत देखा और यह परिवर्तन को दर्शाता है। मुझे आश्चर्य है कि बूटस्ट्रैप का सीएसएस संदिग्ध हो सकता है ...

एचटीएमएल (अंतिम एचटीएमएल में "cols =" है, लेकिन कॉलम चौड़ाई डिफ़ॉल्ट मान पर रहता है, जो 30 है। मैं अपनी आंखों पर विश्वास नहीं कर सकता !)

<textarea cols="100" id="comment_body" name="comment[body]" rows="5"></textarea> 

रेल:

<%= form_for([@post, @post.comments.build]) do |f| %> 
    <div class="field"> 
    <i class="icon-user"></i> 
    <%= f.text_field :commenter %> 
    </div> 
    <div class="field"> 
    <i class="icon-comment"></i> 
    <%= f.text_area :body, :rows => 5, :cols => 100 %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    <div> 
<% end %> 

Answer 1

अन्य उत्तर मेरे लिए काम नहीं किया। यह आपने क्या किया:

<div class="span6"> 
     <h2>Document</h2> 
     </p> 
     <textarea class="field span12" id="textarea" rows="6" placeholder="Enter a short synopsis"></textarea> 
     <button class="btn">Upload</button> 
    </div> 

नोट span12 एक div में span6 साथ।

Answer 2

यह चहचहाना बूटस्ट्रैप 2 और simple_form साथ मेरे लिए काम करता 2.0.4
परिणाम एक span9 पंक्ति

<div class="row" > 
    <div class="span9"> 
    <%= f.input :some_text, :input_html => {:rows => 5, :placeholder => "Enter some text.", :class => "span6"}%> 
    </div> 
</div> 

Answer 3

अगर यह सही तरीका हालांकि मैंने किया है मैं नहीं जानता कि में एक span6 पाठ क्षेत्र है इस:

<div class="control-group"> 
    <label class="control-label" for="id1">Label:</label> 
    <div class="controls"> 
    <textarea id="id1" class="textareawidth" rows="10" name="anyname">value</textarea> 
    </div> 
</div> 

और मेरे bootstrapcustom.css फ़ाइल में इस डाल:

@media (min-width: 768px) { 
    .textareawidth { 
     width:500px; 
    } 
} 
@media (max-width: 767px) { 
    .textareawidth { 

    } 
} 

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

Answer 4

अद्यतन: बूटस्ट्रैप 3.0 के रूप में, इनपुट तत्वों की चौड़ाई निर्धारित करने के लिए नीचे वर्णित input-* कक्षाएं हटा दी गईं। इनपुट तत्वों की चौड़ाई निर्धारित करने के लिए col-* कक्षाओं का उपयोग करें। Examples are provided in the documentation।

---

बूटस्ट्रैप 2.3 में, आप चौड़ाई की स्थापना के लिए इनपुट कक्षाओं का उपयोग करेंगे।

<textarea class="input-mini"></textarea> 
<textarea class="input-small"></textarea> 
<textarea class="input-medium"></textarea> 
<textarea class="input-large"></textarea> 
<textarea class="input-xlarge"></textarea> 
<textarea class="input-xxlarge"></textarea>​ 
<textarea class="input-block-level"></textarea>​ 

examples in the documentation के लिए "नियंत्रण आकार" के लिए एक मिल रहा है।

लेकिन ऊंचाई के लिए मुझे लगता है कि आप अभी भी पंक्तियों का उपयोग करेंगे।

Answer 5

बस टेक्स्टरेरा में बूटस्ट्रैप "पंक्ति-तरल पदार्थ" वर्ग जोड़ें। यह 100% चौड़ाई तक फैला होगा;

अद्यतन: बूटस्ट्रैप 3.x के लिए उपयोग करें "कॉल-XS-12" पाठ क्षेत्र के लिए वर्ग;

अद्यतन द्वितीय: इसके अलावा, अगर आप पूरी चौड़ाई उपयोग करने के लिए कंटेनर का विस्तार करना चाहते: कंटेनर-द्रव वर्ग।

Answer 6

मुझे साइट पर निम्नलिखित पाया गया।सीएसएस VS2013

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

द्वारा उत्पन्न किसी विशिष्ट तत्व में इस व्यवहार को ओवरराइड करने के लिए निम्न जोड़ें ...

style="max-width: none;" 

उदाहरण के लिए:

<div class="col-md-6"> 
     <textarea style="max-width: none;" 
       class="form-control" 
       placeholder="a col-md-6 multiline input box" /> 
</div> 

Answer 7

एक अन्य विकल्प बंद विभाजित करने के लिए है साइट.css में textarea निम्नानुसार है:

/* Set width on the form input elements since they're 100% wide by default */ 

input, 
select { 

    max-width: 280px; 
} 

textarea { 

    /*max-width: 280px;*/ 
    max-width: 500px; 
    width: 280px; 
    height: 200px; 
} 

भी (मेरे MVC 5 में) पाठ क्षेत्र के लिए रेफरी जोड़ें:

@Html.TextAreaFor(model => ................... @class = "form-control", @id="textarea"............ 

यह मेरे लिए काम किया