html - Bootstrap-based vertical tab: alignment issues -


3.2.0 का उपयोग करके और बहुत अच्छा , मैंने कई विकल्पों के साथ एक मेनू बॉक्स बनाया है प्रत्येक मेनू आइटम के लिए एक लेबल और संक्षिप्त वर्णन है, जैसा कि नीचे दिए गए चित्र में दिखाया गया है: आइडीपी चयन मेनू

आपको पर कोड के साथ एक उदाहरण मिल सकता है।

अब, मुझे यह करना चाहिए:

  1. संरेखित करें

  2. नीचे दाएं पर सबमिट करें बटन को संरेखित करें। P> कोई मुझे सुझाव दे सकता है कि यह कैसे करें?

    1 बीच में मेनू-मद सामग्री को संरेखित करें (ऊर्ध्वाधर संरेखण के बारे में):

    मैंने हाल ही में @ BEAVER82minimit द्वारा इस उत्कृष्ट ट्यूटोरियल का उपयोग किया है जो बराबर ऊंचाई कॉलम बूटस्ट्रैप शैली बनाने की अनुमति देता है:

    आप इसे इस तरह से उपयोग कर सकते हैं:

      & lt; div class = "कंटेनर कंटेनर-एक्सएस-ऊंचाई" & gt; & Lt; div वर्ग = "पंक्ति पंक्ति-एक्स-ऊंचाई" & gt; & Lt; div वर्ग = "col-xs-6 col-xs-height" & gt; & lt; / div & gt; & Lt; div वर्ग = "कर्नल-एक्सएस-3 को-एक्सएस-ऊँचाई-कर्नल" & gt; & lt; / div & gt; & Lt; div वर्ग = "कर्नल- xs-2 col-xs-height col-middle" & gt; & lt; / div & gt; & Lt; div वर्ग = "col-xs-1 col-xs-height col-bottom" & gt; & lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;   

    वर्ग कर्नल-मध्य के साथ आप अपनी सामग्री को खड़ी कर सकते हैं।

    2 नीचे दाईं ओर सबमिट करें बटन

    a) बटन को संरेखित करें नीचे के दाईं ओर जोड़ें और रैपिंग & lt; p & gt;

      & lt; बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक बीटीएन नीचे-सही" शैली = "मार्जिन: 20 पीएक्स 0 0 0", & gt; & lt; span class = " ग्लाइफिकॉन ग्लाइफिकॉन-लॉग-इन "& gt; & lt; / span & gt; जमा करें & lt; / बटन & gt;   

    ख) इसे अपने स्टाइलशीट में जोड़ें:

      .bottom-right {position: absolute; सही: 0; नीचे: 0; }   

    बटन सामग्री के साथ ओवरलैप करने के लिए टैब सामग्री को रोकने के लिए, टैब-सामग्री डिवेल में padding-bottom जोड़ें:

      div। भाई-टैब-सामग्री {पृष्ठभूमि रंग: #ffffff; पैडिंग-बाएं: 20px; पैडिंग-टॉप: 10 पीएक्स; पैडिंग-नीचे: 54px; }   

    यहां एक डेमो है:

    सूची-समूह-वस्तु ऊर्ध्वाधर संरेखित मध्य:

      .text-center {display: table; चौड़ाई: 100%; } .text-center & gt; Div {प्रदर्शन: टेबल-सेल; ऊर्ध्वाधर-पंक्ति: बीच; }   

    मार्कअप के लिए सूची-समूह-आइटम के अंतर्गत divs जोड़ें:

      & lt; a href = "#" class = "सूची-समूह-मद आईडीपी-समूह-आइटम पाठ-केंद्र" & gt; & Lt; div & gt; & Lt; मजबूत & gt; लेबल बी & lt; / strong & gt; & lt; br / & gt; लेबल बी डीसीसी & lt; / div & gt; & Lt; / a & gt;   

    डेमो:

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -