मेरे पास 3 पंक्ति divs के साथ एक col div है और मैं उन्हें col div के केंद्र में रखना चाहता हूं, जैसा कि आप चित्र पर देख सकते हैं, पंक्ति div col div के बाईं ओर हैं, और मुझे नहीं पता उन्हें कर्नल डिव के केंद्र में कैसे रखा जाए।

enter image description here

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col text-center">
  <div class="row">
    <div id="tantargyselectdiv" class="col-sm-5">
      <select name="tantargyselect" id="tantargyselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="tanarselectdiv" class="col-sm-5">
      <select name="tanarselect" id="tanarselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <form action="{{URL::to('statisztikaBetoltFelev')}}" method="post">
      <input type="hidden" name="_token" value="{!! csrf_token() !!}">
      <div id="felevselectdiv" class="col-sm-5 text-center">
        <select name="felevselect" id="felevselect">
        </select>
      </div>
      <div class="col-sm-5 text-center">
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Mehet</button>
        </div>
      </div>
    </form>
  </div>
</div>

मुझे पता है कि यह पेशेवर वेब डेवलपर्स के लिए भयानक लग रहा है, लेकिन मैं स्टाइल में विशेषज्ञ नहीं हूं, अगर आप कर सकते हैं तो कृपया मेरी मदद करें।

-1
lambozsolty 16 अप्रैल 2020, 19:18

1 उत्तर

सबसे बढ़िया उत्तर

जैसा कि कई उपयोगकर्ताओं ने टिप्पणी अनुभाग में कहा, justify-content-center काम करेगा लेकिन कोई भी उत्तर के साथ नहीं आता है, इसलिए मैं इसे करता हूं।

नीचे दिया गया स्निपेट देखें जो आपको समझने में मदद करता है।

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col text-center">
  <div class="row justify-content-center">
    <div id="tantargyselectdiv" class="col-sm-5">
      <select name="tantargyselect" id="tantargyselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <div id="tanarselectdiv" class="col-sm-5">
      <select name="tanarselect" id="tanarselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <form action="{{URL::to('statisztikaBetoltFelev')}}" method="post">
      <input type="hidden" name="_token" value="{!! csrf_token() !!}">
      <div id="felevselectdiv" class="col-sm-5 text-center">
        <select name="felevselect" id="felevselect">
        </select>
      </div>
      <div class="col-sm-5 text-center">
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Mehet</button>
        </div>
      </div>
    </form>
  </div>
</div>
1
Nisharg Shah 16 अप्रैल 2020, 19:10