बूटस्ट्रैप में अपने लेबल और इनपुट को कितनी अच्छी तरह संरेखित करें 4

Question 1

मैं बूस्ट्रैप सीख रहा हूं, मैं सीएसएस को काफी जानता हूं।

बूटस्ट्रैप 4 में, मैं HTML / CSS में नीचे दिए गए इस उदाहरण की तरह 2 इनपुट और 2 लेबल बनाना चाहूंगा।

enter image description here

एचटीएमएल

<div class="about">
   <div class="section-about">
      <label>Nom du Titulaire</label>
      <input type="text" name="name" />
   </div>
   <div class="section-about">
      <label>Intitulé</label>
      <input type="text" name="name" />
   </div>
</div>

सीएसएस

body {
  margin: 0;
  padding: 0;
  background-color: #e6ebb1;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
}
.about {
  position: relative;
  padding-top: 35px;
}
.about .section-about {
  font-size: 12px;
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
}
.about .section-about label {
  margin: 5px 10px;
  display: block;
  width: 150px;
  text-align: right;
}
.about .section-about input {
  margin-right: 10px;
}

मैंने नीचे बूटस्ट्रैप में अनुकूलन करने की कोशिश की है। लेकिन, मुझे लगता है कि कोड पूर्ण और सही नहीं है ...

enter image description here

क्षमा करें, मुझे वह नहीं मिला जो मैं Google पर करना चाहता हूं।

मदद के लिए पहले ही धन्यवाद।

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link
         href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         rel="stylesheet"
         />
   </head>
   <body>
      <br /> <br />
      <div class="container">
         <div class="form-group row">
            <div class="col-auto col-form-label">
               <label for="dishes-0-dish">Nom du Titulaire</label>
            </div>
            <div class="col">
               <input
                  class="form-control"
                  style="width: 50%"
                  id="dishes-0-dish"
                  name="dishes-0-dish"
                  type="text"
                  />
            </div>
         </div>
         <div class="form-group row">
            <div class="col-auto col-form-label">
               <label for="dishes-0-dish">Numéro de portefeuille</label>
            </div>
            <div class="col">
               <input
                  class="form-control"
                  style="width: 50%"
                  id="dishes-0-dish"
                  name="dishes-0-dish"
                  type="text"
                  />
            </div>
            <div class="col-sm-10 col-sm-offset-2">
               <button type="submit" class="btn btn-primary">Rechercher</button>
            </div>
         </div>
      </div>
   </body>
</html>

bootstrap-4

0

user17074809 4 नवम्बर 2021, 22:41

Answer

आपको अपनी इच्छा के डिजाइन के लिए कॉलम को उसके आकार से घोषित करना होगा। क्योंकि ऑटो पहले वाले को तुरंत करने के बाद स्पेस को अपना लेता है। इसलिए, यदि आपके दोनों टेक्स्ट का आकार समान नहीं है, तो यह वैसा नहीं दिखेगा जैसा आप चाहते हैं। दूसरी तरफ आप लेबल के लिए चौड़ाई घोषित कर सकते हैं जो कॉलम घोषित करने के समान है।

नीचे दिए गए कोड संशोधन का पालन करें।

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link
         href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         rel="stylesheet"
         />
   </head>
   <body>
      <br /> <br />
      <div class="container">
         <div class="form-group row">
            <div class="col-md-4 col-form-label text-right">
               <label for="dishes-0-dish">Nom du Titulaire</label>
            </div>
            <div class="col-md-8">
               <input
                  class="form-control"
                  style="width: 50%"
                  id="dishes-0-dish"
                  name="dishes-0-dish"
                  type="text"
                  />
            </div>
         </div>
         <div class="form-group row">
            <div class="col-md-4 col-form-label text-right">
               <label for="dishes-0-dish">Numéro de portefeuille</label>
            </div>
            <div class="col-md-8">
               <input
                  class="form-control"
                  style="width: 50%"
                  id="dishes-0-dish"
                  name="dishes-0-dish"
                  type="text"
                  />
            </div>
            <div class="col-sm-10 col-sm-offset-2">
               <button type="submit" class="btn btn-primary">Rechercher</button>
            </div>
         </div>
      </div>
   </body>
</html>

शुभकामनाएं :)

1

Sayedur Rahman 4 नवम्बर 2021, 23:12

आपका बहुत बहुत धन्यवाद।

–

bouns

5 नवम्बर 2021, 00:18

Question 2