कैसे 2 भागों

Question

में एक ट्विटर बूटस्ट्रैप मोडल विभाजित करने के लिए मैं है निम्नलिखित एचटीएमएल

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload"> 
          <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div> 
          <div> <span class="btn btn-file"><span class="fileupload-new">Select image</span> 
           <span 
           class="fileupload-exists">Change</span> 
            <input type="file" /> 
            </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> 

          </div> 
         </div> 
        </td> 
        <td> 
         <div class="progress"> 
          <div class="bar" style="width: 60%;"></div> 
         </div> 
         <button class="btn btn-mini" type="button">Upload</button> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 

</div> 

Answer 1

संपादित करें: यह सिर्फ एक शुद्ध सीएसएस समाधान है, अगर नीचे दिए गए उत्तर को देखने के लिए आप कुछ और बूटस्ट्रैप्टिक चाहते हैं।

---

आप दो भागों में मोडल शरीर विभाजित करने के लिए, सरल रूप में के रूप में यदि आप दो कॉलम की एक पेज लेआउट कर सीएसएस का एक सा उपयोग कर सकते हैं।

... 
<div class="modal-body> 
    <div class="first-column"> 
     <!-- Your first column here --> 
    </div> 
    <div class="second-column"> 
     <!-- Your second column here --> 
    </div> 
</div> 
... 

और सीएसएस

.first-column { 
    width: 40%; 
    float: left; 
} 

.second-column { 
    width: 40%; 
    float: right; 
} 

मोडल अंदर ग्रिड प्रणाली का उपयोग करने का कोई जरूरत नहीं है, और यदि आप फैला के साथ फिट करने के लिए कोशिश शायद परिणाम बदतर शायद हो जाएगा।

Answer 2

बस जोड़ना चाहता था कि मैं बूटस्ट्रैप-प्रदत्त सीएसएस का उपयोग करके ऐसा करने में कामयाब रहा। निम्नलिखित कोड मेरे लिए काम किया:

<div class="modal-body row-fluid"> 
    <div class="span6"> 
    <!-- Your first column here --> 
    </div> 
    <div class="span6"> 
    <!-- Your second column here --> 
    </div> 
</div> 

Answer 3

यदि आप बूटस्ट्रैप 3.0 का उपयोग कर रहे हैं तो बस यहां एक उत्तर जोड़ें। बूटस्ट्रैप 3.0 में, row-fluidrow ने ले ली है और spancol-md (पूर्ण बदली हुई लॉग here)

तो एडुआर्डो ग्राजेड़ा का जवाब हो जाता है

<div class="modal-body row"> 
    <div class="col-md-6"> 
    <!-- Your first column here --> 
    </div> 
    <div class="col-md-6"> 
    <!-- Your second column here --> 
    </div> 
</div>