Saya memiliki masalah dengan tombol tengah semua di setiap col-md-4:

<div class="row position-relative mt-2">
  <div class="col-md-4 center-block">
    <div class="center-block align-to-bottom">
      <div class="btn-group-vertical">
        <p>
          <button class="btn btn-info btn-sm btn-block" type="button">
            button
          </button>
        </p>
        <p>
          <button class="btn btn-warning btn-sm btn-block" type="button">
            button
          </button>
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <div class="btn-group-vertical">
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>

      <p>
        <button class="btn btn-warning btn-sm btn-block" type="button">
          button
        </button>
      </p>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <p>
      <button class="btn btn-success btn-sm btn-block" type="button">
        button
      </button>
    </p>
  </div>
</div>

Juga pertanyaan kedua -> Saya juga menggunakan w-100, h-85... Tapi tidak berhasil. Saya juga mencari solusi untuk mengatur ukuran tombol relatif.

0
profiler 9 Agustus 2019, 13:34

1 menjawab

Jawaban Terbaik

Untuk menyelaraskan tombol secara horizontal, Anda cukup menambahkan kelas text-center ke kolom induk Anda.

Saya juga menghapus tag p dan sebagai gantinya menambahkan margin ke tombol itu sendiri dengan kelas mb-2

Saya juga menghapus banyak kelas Anda karena tampaknya bukan kelas Bootstrap 4. Jika ini diperlukan, tambahkan saja kembali ke tempat yang menurut Anda perlu.

Juga daripada membuat tombol Anda menjadi blok yang memberikan lebar penuh dari orang tua Anda, saya hanya menambahkan baris lain dan meletakkan setiap tombol di kolom lebar penuhnya sendiri yang akan bertindak sebagai blok.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
     
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <button class="btn btn-success btn-sm" type="button">
      Button
    </button>
  </div>
</div>

Saya harap ini menyelesaikan masalah Anda, beri tahu saya jika itu tidak sesuai dengan yang Anda cari.

1
Halden Collier 9 Agustus 2019, 12:42