बूटस्ट्रैप फॉर्म गलत दिखता है

Question

यदि मेरे पास बूटस्ट्रैप पैनल के अंदर एक फॉर्म परिभाषित किया गया है, तो फॉर्म समूह लेआउट टुकड़ों पर जाता है।

मैं इतना है कि मैं देख सकता है, जहां यह था प्रपत्र लाल रंग;) यहाँ jsFiddle है: https://jsfiddle.net/DTcHh/

मैं ने पाया है कि अगर मैं सीएसएस के लिए

.panel-body .form-horizontal .form-group { 
    margin-right: 25px; 
    margin-left: 25px; 
} 

जोड़ने , तो मुझे यह

(मैं प्रपत्र लाल रंग इतना है कि मैं देख सकता है, जहां यह था;))

तो ऐसा लगता है कि वह निश्चित होती है, लेकिन मेरे लिए एक भयानक हैक लगता

• इस बूटस्ट्रैप में एक बग है है
• क्या मुझे बस इस सीएसएस
• को लागू करना है क्या मेरी फॉर्म परिभाषाओं में कुछ गड़बड़ है?

धन्यवाद

Answer 1

बूटस्ट्रैप डॉक्स के अनुसार

(http://getbootstrap.com/css/#forms-horizontal), वर्ग form-horizontal<form> अधिनियम एक .row की तरह ताकि आप समूहों, लेबल और सामान से में जोड़ सकते हैं और .col-**-* है की जरूरत नहीं है बनाता है। दस्तावेज़ आपको एक उदाहरण देते हैं

लेकिन आपके पास .row.row और .col-**-* के अंदर .row है। .row में उसके माता-पिता की पैडिंग को हटाने के लिए नकारात्मक मार्जिन है, इसलिए .col-**-* के साथ माता-पिता के रूप में इसमें 2 नकारात्मक मार्जिन हैं।

तो यह गन्दा है। मैं आपके इच्छित दिखने के लिए अपने .row और .form-horizontal कक्षा को हटाने का सुझाव देता हूं या आपके जैसा मार्जिन जोड़ता हूं।

Here it's a fiddle।

Answer 2

सही दिशा में मुझे इंगित करने के लिए दूसरे उत्तर के लिए धन्यवाद। मुझे व्यक्तिगत रूप से 12 चौड़ाई वाली कॉलम जोड़ने का विकल्प पसंद है जो अन्य फॉर्म-ग्रुप के चारों ओर लपेटता है।

<form class="form-horizontal" style="background: red;"> 
    <div class="col col-xs-12"> 
     <div class="form-group"> 
     <label>field 1</label> 
     <input class="form-control" type="text" /> 
     </div> 
     <div class="form-group"> 
     <label>field 2</label> 
     <input class="form-control" type="text" /> 
     </div> 
    </div> 
    </form> 

Here's the fiddle