Pertanyaan Cara membuat kolom lebar dinamis di Twitter Bootstrap


Bagaimana Anda menggunakan Twitter Bootstrap untuk membuat struktur daftar seperti tabel, di mana beberapa kolom mengambil banyak ruang, seperti yang diperlukan untuk mengakomodasi elemen terluas dari kolom itu, dan satu kolom mengambil ruang yang tersisa?

Sebagai contoh:

Id    |Name     |Email address                
100001|Joe      |MamiePVillalobos@teleworm.us
100   |Christine|ChristineJWilliams@dayrep.com
1001  |John     |JohnLMiley@dayrep.com

itu Kolom id hanya membutuhkan ruang yang cukup untuk menampung 100001 id, yang merupakan id terpanjang.

Itu Kolom nama hanya membutuhkan ruang yang cukup untuk menampung nama Christine.

Itu Kolom email mengambil ruang yang tersisa.


32
2017-10-21 15:15


asal


Jawaban:


Tabel seperti struktur menggunakan tag meja lama

Hanya bercanda - atau saya tidak.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>MamiePVillalobos@teleworm.us</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>ChristineJWilliams@dayrep.com</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>JohnLMiley@dayrep.com</td></tr>
</table>

Menggunakan sistem grid

Di dokumentasi tentang sistem jaringan bootstrap saya tidak dapat menemukan blok bangunan lebar otomatis. Segala sesuatu di luar kotak memiliki lebar tertentu dan sejumlah kolom tetap:

   <div class="row">
      <div class="span2">ID</div>
      <div class="span2">Name</div>
      <div class="span8">E-Mail</div>
    </div>
    <div class="row">
      <div class="span2">100001</div>
      <div class="span2">Joe</div>
      <div class="span8">MamiePVillalobos@teleworm.us</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">ChristineJWilliams@dayrep.com</div>
    </div>

Oleh karena itu saya berasumsi bahwa Anda harus membangun versi Anda sendiri untuk tabel 3-kolom dengan ukuran-otomatis.

Di dalam saya demo grid-column membungkus jika ruang akan menyempit atau, jika ruang terlalu lebar, kolom diregangkan.

Perbarui dengan markup kreatif

Saya memperbarui saya demo dengan kelas khusus. Markup kreatif mendekati apa yang Anda cari

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">MamiePVillalobos@teleworm.us <br />
        ChristineJWilliams@dayrep.com
      </div>
  </div>    

Menggunakan tabel tampilan css-3

Di tutsplus saya menemukan artikel menggunakan css-3 display:table untuk mengatur meja seperti tata letak. Kecuali Anda menggunakan tiga div untuk setiap baris, itu tidak menyelesaikan masalah pembungkusan baris.

#content {  
    display: table;  
}  
#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;  
}  
aside {  
    display: table-cell;  
    width: 300px;  
}  

Desain responsif bootstrap

Sejauh yang saya mengerti dokumentasi bootstrap tidak ada built-in soultion untuk tata letak 3-kolom dengan lebar otomatis dan tersisa. Untuk Mengutip laman desain responsif di bootstrap: "Gunakan kueri media secara bertanggung jawab dan hanya sebagai permulaan untuk audiens seluler Anda. Untuk proyek yang lebih besar, jangan mempertimbangkan basis kode khusus dan bukan lapisan kueri media."

Bisakah Anda menjelaskan lebih lanjut mengapa Anda tidak dapat menggunakan tabel?


27
2017-10-21 20:08



Seperti kata orang lain, Anda harus menggunakan tabel biasa di mana mereka masuk akal. Juga, tampilan CSS3: meja bisa menjadi solusi yang baik.

Bergantung pada use case, ada solusi berbeda yang bisa Anda pertimbangkan:
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
Ini adalah bagian dari CSS yang menambahkan "col-sm-auto" sebagai tambahan untuk "col-sm-1", "col-sm-5" dll.

(Atm, saya akan merekomendasikan untuk menyalin ini ke file css khusus dan menyesuaikan dengan kebutuhan Anda.)

Contoh

<div class="row">
  <div class="col-xs-auto">Left</div>
  <div class="col-xs-auto-right">Right</div>
  <div class="col-middle">Middle</div>
</div>

Berikut ini biola: http://jsfiddle.net/9wzqz/

Ide

  • .col - * - auto mengapung ke kiri, dengan padding khas, tetapi tanpa pengaturan lebar eksplisit.
  • .col - * - otomatis mengapung ke kanan sebagai gantinya.
  • .col-middle memiliki tampilan: tabel, yang mencegahnya mengambang di sekitar elemen lainnya.
  • Gunakan "xs", "sm", "md", "lg" untuk menargetkan lebar layar tertentu.

Keterbatasan

Kolom kiri / kanan akan melebar menjadi lebar penuh, jika Anda mengisinya dengan teks panjang. Lebih baik gunakan untuk hal-hal berukuran tetap seperti gambar.

Kolom tengah hanya akan mengambil lebar penuh yang tersedia jika memiliki konten yang cukup di dalamnya.


9
2017-07-14 17:53



jika kamu tidak perlu membatasi ukuran kolom, Anda hanya dapat menonaktifkan lebar.

<span class="col-xs-1" style="width: inherit !important; ">unknown ...</span>

Saya memerlukan definisi bootstrap untuk properti kolom lain (padding, tinggi, dll), jadi saya menambahkan definisi col, tetapi unit kecil (col-xs-1).

catatan:

  • klausa "penting" mungkin dijatuhkan (saya tidak yakin)
  • Dalam proyek saya, teks-teks itu dikenal kecil pula.

3
2018-04-15 11:51



Yah sesuai dengan Dokumentasi bootstrap Anda bisa mendaftar table-responsive kelas css ke elemen tabel dan membuatnya responsif. Apa yang saya amati itu benar-benar membuat gulir-bisa.


-1
2017-07-30 00:24