html बोर्नबॉट निट के साथ स्पैन कॉलम पर मार्जिन निकालें




css sass (3)

उत्तरदायी ग्रिड के लिए मैं थॉटबॉट के बोरबॉन नीट का इस्तेमाल करना शुरू कर रहा हूं। कुल मिलाकर, यह बहुत चालाक है और मैं वास्तव में इसे पसंद करता हूं, लेकिन मुझे एक छोटी सी समस्या पर लटका दिया गया है।

मैं मार्जिन के बिना दो स्तंभों को एक-दूसरे के बंटाने के लिए कोशिश कर रहा हूं, लेकिन उनके उदाहरणों से दोहराए जाने की कोशिश करने के बाद, मुझे एक ही परिणाम नहीं मिल रहा है

यहां नमूना एचटीएमएल है:

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <p>
            This is the container
        </p>

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

यहां मेरा एससीएसएस है:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
 }

}

यह किसका उत्पादन करता है:

लेकिन जब मैं दो स्तंभों को घोंसले / एक दूसरे तक तालिका पद्धति का उपयोग करके उनके उदाहरण दिखाता है, का उपयोग करने की कोशिश करता हूं, तो मुझे यह मिलता है:

एससीएसएस:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row (table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display;
 }

}

आउटपुट:

यदि मैं @include omega(); मार्ग जो काम करता है, लेकिन फिर यह अंतिम कॉलम की पूरी चौड़ाई का विस्तार नहीं करता है:

एससीएसएस:

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    @include omega();
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include omega();
 }

}

आउटपुट:

मूलतः, मैं उस कंटेनर अनुभाग में मौजूद सामग्री को छोड़ सकता हूं जो कुछ करता है जिसके परिणामस्वरूप मैं उस नतीजे को प्राप्त कर सकता हूं जो मैं देख रहा हूं। लेकिन क्या यह हासिल करने के लिए खाली div बनाना आवश्यक है ?:

एससीएसएस

section {
@include outer-container;
text-align: center;
}

.container {
@include span-columns (12);
@include row(table);
text-align: center;
margin: 0;
padding: 0;


.col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
}
.col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
    @include reset-display
 }

}

HTML ( .container में सामग्री की टिप्पणी की गई है):

<section>
    <p>
        This is the main section.
    </p>

    <div class="container">
        <!-- <p>
            This is the container
        </p> -->

        <div class="col1">
            <p>
                This is the 1st column.
            </p>
        </div>

        <div class="col2">
            <p>
                This is the 2nd column.
            </p>
        </div>

    </div>
</section>

आउटपुट:

वैसे भी, मुझे नहीं पता है कि इसे प्राप्त करने का "उचित" तरीका क्या है यह दस्तावेज़ीकरण वास्तव में विशिष्ट नहीं है कि कैसे एक दूसरे के खिलाफ घोंसला बनाने के लिए दो कॉलम मिलते हैं और जो मैंने उनके उदाहरण में दोहराने की कोशिश की, उसी परिणाम से उत्पन्न नहीं हुआ।

जब तक मुझे विशेष रूप से एक margin:0; जोड़ना नहीं चाहिए margin:0; पिछले कॉलम पर


आप हर कंटेनर के लिए प्रत्येक कंटेनर को प्रत्येक ग्रिड की तुलना में थोड़ा कम सेट कर सकते हैं, फिर प्रत्येक कंटेनर से शेष शेष मूल्य को पालें और प्रत्येक कंटेनर को बाएं / दाएं तरफ से दूर की तरह बदल दें:

एचटीएमएल:

<div id="wrapper">
    <div id="1"></div>
    <div id="2"></div>
</div>

सास / SCCS:

#wrapper
{
    #1
    {
        @include span-columns(5);
        @shift(1);
    }
    #2
    {
        @span-columns(5);
        @shift(-1);
    }


}

या शायद # 2 की दिशा बदलने के लिए निर्देश-संदर्भ मिश्रक का उपयोग करें ...

सास / SCCS:

#wrapper
{
    #1
    {
        @include include span-columns(5);
        @include shift(1);
    }

        @include direction-context(right-to-left)
        {
            #2
            {
                @include span-columns(5);
                @include shift(-1);
            }
        }

}

मुझे यकीन नहीं है कि अगर मैं आपकी समस्या का 100% रहा हूं, लेकिन अगर आप का मतलब है कि बाएं div की दाईं तरफ सीधे डिवेल की बाईं तरफ सीधे छूने के लिए नहीं मिल सकता है, मेरा मानना ​​है कि ये 2 समाधान काम करेंगे यदि आप उनके साथ थोड़ा सा खेलें ..

मुझे पता है कि यह कैसे काम करता है ~ जीएल!


क्या आप सामग्री के साथ अपने p को बस गलत नहीं रखते थे "यह कंटेनर है", जिससे कि यह गलती से प्रयोग किया जा रहा है, लेकिन आप वास्तव में यह कंटेनर से ऊपर होना चाहते हैं?

इसे ऊपर रखकर। .container और यह काम करता है:

<section>
  <p>
    This is the main section.
  </p>
  <p>
    This is the container
  </p>
  <div class="container">
    <div class="col1">
      <p>
        This is the 1st column.
      </p>
    </div>

    <div class="col2">
      <p>
        This is the 2nd column.
      </p>
    </div>

  </div>
</section>

एससीएसएस:

section {
  @include outer-container;
  text-align: center;
}

.container {
  @include fill-parent;
  @include row(table);

  .col1 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
  .col2 {
    @include span-columns(6);
    background: #ccc;
    @include pad(em(15));
  }
}

आउटपुट:


आप कुछ ऐसा कर सकते हैं जैसे- स्पैन-कॉलम को शामिल करें (12 में से 6, ब्लॉक-पतन)







neat