कैसे फ्लेक्स के साथ खड़ी सामग्री संरेखित करने के लिए संभव है? (समस्या केवल बूटस्ट्रैप जोड़ने!)

वोट
0

मैं खड़ी aling को एक ही पंक्ति में दो divs सामग्री की जरूरत है और मैं फ्लेक्स गुणों का उपयोग करके आसानी से हासिल कर लिया है।

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8 />
    <meta name=viewport content=width=device-width, initial-scale=1>
    <link rel=stylesheet type=text/css href=./bootstrap-4.3.1/css/bootstrap.min.css>
</head>

<body>

<div class=mainContainer noselect>

    <div class=flex-container style=display: flex; width: 100%px; height: 30px; background-color: #063b61; justify-content: space-between; align-items: center; flex-wrap: nowrap;>
        <div class=flex-item1 style=background-color: white; width:142px; height: 18px;><img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png alt=Grifols NAT Parachute title=Grifols NAT Parachute style=width:142px; height: 18px;/></div>
        <div class=flex-item2 style=background-color: green; color: white; font-size: 13px; font-weight: 600;>Centered!</div>
    </div>  

<script type=text/javascript> 

</script>

</body>
</html>

इस कोड के साथ आप हरी div सामग्री केंद्रित और सही ढंग से तिनका div केंद्रित गूगल लोगो चित्र देख सकते हैं।

बूटस्ट्रैप

मुद्दे अब आते हैं, जब मैं केवल बूटस्ट्रैप सीएसएस जोड़ने (मेरी परियोजना में आवश्यक)। अब हरी div ठीक रहता है लेकिन सफेद एक सही aligment खो देता है।

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8 />
    <meta name=viewport content=width=device-width, initial-scale=1>
    <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css integrity=sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T crossorigin=anonymous>
</head>

<body>

<div class=mainContainer noselect>

    <div class=flex-container style=display: flex; width: 100%px; height: 30px; background-color: #063b61; justify-content: space-between; align-items: center; flex-wrap: nowrap;>
        <div class=flex-item1 style=background-color: white; width:142px; height: 18px;><img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png alt=Grifols NAT Parachute title=Grifols NAT Parachute style=width:142px; height: 18px;/></div>
        <div class=flex-item2 style=background-color: green; color: white; font-size: 13px; font-weight: 600;>Centered!</div>
    </div>  

<script type=text/javascript> 

</script>

</body>
</html>

बूटस्ट्रैप

क्यों हो रहा है और मेरे लिए ज्यादा महत्वपूर्ण है कि कैसे मैं इस समस्या को हल कर सकते हैं? निकालें बूटस्ट्रैप एक विकल्प नहीं है :(

09/10/2019 को 13:02
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more