सामग्री फिट करने के लिए बूटस्ट्रैप div का आकार बदलें

Question

मैं 2 divs को साइड-साइड बनाने के लिए ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं। प्रत्येक div में इसके अंदर मध्यम और बड़ी छवियां होती हैं, jquery आइसोटोप का उपयोग करके व्यवस्थित की जाती है। समस्या यह है कि जब एक div में पर्याप्त छवियां नहीं होती हैं, तो div चौड़ाई समान होती है और वहां बहुत सी अतिरिक्त जगह शेष होती है। इस तरह:

मैं चाहता हूं कि divs केंद्रीय रूप से संरेखित करें और इसके अंदर की छवियों को फिट करने के लिए चौड़ाई में भी कम करें। इस तरह:

मेरे एचटीएमएल कोड यह है:

<div id="container" class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="legend span8">Section1</div> 
     <div class="legend span4">Section2</div> 
    </div> 
    <div class="row-fluid"> 
     <div id="section1" class="span8"> 
      <div class="small"><img src="images/1.jpg" /></div> 
      <div class="small"><img src="images/2.jpg" /></div> 
      <div class="big"><img src="images/3.jpg" /></div> 
     </div> 
     <div id="section2" class="span4"> 
      <div class="small"><img src="images/1.jpg" /></div> 
      <div class="small"><img src="images/2.jpg" /></div> 
      <div class="big"><img src="images/3.jpg" /></div> 
     </div> 
    </div> 
</div> 

मेरे सीएसएस इस तरह दिखता है:

#section1 .small{ 
    width:150px; 
    height:200px; 
    overflow:hidden; 
} 
#section1 .big{ 
    width:320px; 
    height:420px; 
    overflow:hidden; 
} 
#section2 .small{ 
    width:80px; 
    height:100px; 
    overflow:hidden; 
} 
#section2 .big{ 
    width:170px; 
    height:220px; 
    overflow:hidden; 
} 

अन्य शैलियों बूटस्ट्रैप के हैं।

Answer 1

मैं पूरी तरह से इस प्रश्न के बारे में भूल गया था जिसे मैंने पूछा था। मैंने उपरोक्त परिस्थिति को हल किया:

1) मुख्य container पर बराबर बाएं और दाएं मार्जिन सेट करना।

2) धारा 1 से right-to-left में आइसोटोप सेट करना। मेरा वास्तव में एक अरबी साइट नहीं है, लेकिन मैं ज्यादातर छवियों का उपयोग कर रहा हूं इसलिए कोई समस्या नहीं है।

इसके अलावा, सभी वर्गों के लिए निश्चित-चौड़ाई विनिर्देशों को हटा दें। कंटेनर पर मार्जिन दें, और बूटस्ट्रैप के तरल पदार्थ डिजाइन केंद्रित-अनुकूलित डिज़ाइन का ख्याल रखें।

Answer 2

मैं भी isotope साथ bootstrap उपयोग करें, लेकिन क्या मैं पहली बार कर मेरे स्वयं के डिजाइन का सम्मान सुनिश्चित करें width की और height 'है।

, जैसा कि आपको का उपयोग बदलने के लिए, सामान्य रूप से मैं तो

.width2, .width3, .width4, .width8 और .height2, .height4

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

उसके बाद, आपका सभी डिज़ाइन आपके आकारों के साथ सेट और सही ढंग से गिर जाएगा।

वैसे, आप कुछ इस तरह हो रही अंत करना चाहिए:

<div id="container"> 
    <div class="weather item width2 height8" data-id="1"></div> 
    <div class="country item width2 height4" data-id="2"></div> 
    <div class="country item width2 height4" data-id="3"></div> 
    <div class="country item width2 height4" data-id="4"></div> 
    <div class="country item width2 height4" data-id="5"></div> 
</div> 

और प्रत्येक div के अंदर, मैं व्यक्तिगत रूप JsRender का उपयोग टेम्पलेट्स प्रस्तुत करना है, लेकिन आप बूटस्ट्रैप लेआउट होना चाहिए, प्रत्येक .item

अंदर