ट्विटर बूटस्ट्रैप: साइड मार्जिन कैसे जोड़ें?

मेरे पास केंद्रित ट्विटर बूटस्ट्रैप कंटेनर वाला एक पृष्ठ है।ट्विटर बूटस्ट्रैप: साइड मार्जिन कैसे जोड़ें?

इस कंटेनर में एक शीर्षलेख है जो पूरे चौड़ाई (span12) को फैलाता है और शीर्षलेख के नीचे चित्रों की एक गैलरी है, जो प्रत्येक पंक्ति में 4 कोशिकाओं (चित्रों वाली) के साथ पंक्तियों का एक गुच्छा है।

मैं प्रत्येक पंक्ति में साइड मार्जिन जोड़ना चाहता हूं ताकि पहली और आखिरी तस्वीर कंटेनर सीमाओं के साथ पूरी तरह से स्नग न हो और चित्र समान रूप से दूरी पर हों। मैं मार्जिन के लिए ऑफ़सेट 1 का उपयोग नहीं करना चाहता क्योंकि यह बहुत बड़ा तरीका है।

यहाँ वर्तमान mockup के लिए एक लिंक है: http://i46.tinypic.com/21e2h4o.jpg

स्रोत

2012-06-22 alecswan

आप अपने मार्कअप या mockup तस्वीर के साथ jsfiddle.net में एक डेमो पोस्ट कर सकते हैं? मुझे यह देखने में कठिनाई हो रही है कि यह कहां है कि यह कहां है। –

मैंने अपनी मूल पोस्ट में नकली करने के लिए एक लिंक शामिल किया। धन्यवाद – alecswan

क्या आपने तरल वर्ग की कोशिश की है? कंटेनर-तरल पंक्ति-तरल पदार्थ –

आप सही मार्जिन

http://css-tricks.com/how-nth-child-works/ के लिए बाईं मार्जिन

nth-child(4n+4) के लिए n वें वाले बच्चे सीएसएस संपत्ति

nth-child(4n+1) उपयोग कर सकते हैं

या

style="padding:0 19px"

के साथ अपने .span12 में एक <div> जोड़ सकते हैं और एक <div class="row-fluid">

<div class="row"> 
    <div class="span12"> 
    <div style="padding:0 19px"> 
     <div class="row-fluid"> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     <div class="span3">3</div> 
     </div> 
    </div> 
    </div> 
</div>

स्रोत

2012-06-23 12:12:39 baptme

मुझे यह उल्लेख करना चाहिए था कि मुझे पता है कि मार्जिन सेट करने के लिए jQuery और CSS3 चयनकर्ताओं का उपयोग कैसे करें। लेकिन यह दृष्टिकोण प्राकृतिक तरीके से हस्तक्षेप करता है ट्विटर बूटस्ट्रैप पंक्ति में कोशिकाओं को बताता है और मुझे मीडिया के आकार के अनुसार मार्जिन समायोजित करना होगा। तो, मैं ट्विटर बूटस्ट्रैप विन्यास के साथ ऐसा करने का एक तरीका ढूंढ रहा था। – alecswan

span12 अंदर जोड़ने 940px चौड़ा है। यह आपके कार्यक्षेत्र की चौड़ाई या जो भी हो। ग्रिड सिस्टम के बीच 960px एक सुंदर आम प्रथा प्रतीत होता है।

यहाँ मेरी समाधान है ...

<html> 
<head> 
    <title></title> 
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     body { 
      background-color: #CCC; 
     } 

     #SiteBody 
     { 
      width: 960px; 
      margin: 0 auto; 
      background-color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="SiteBody"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12"> 
        <h1> 
         My Page</h1> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

स्रोत

2012-06-23 22:24:58 Theo

ट्विटर बूटस्ट्रैप: साइड मार्जिन कैसे जोड़ें?

उत्तर

संबंधित मुद्दे