Tôi có thể cung cấp col-md-1.5 trong bootstrap không?

Tôi muốn điều chỉnh các cột trong Twitter Boοtstrap.

Tôi biết trong bootstrap có lưới 12 cột. Có cách nào để thao tác các lưới để có 1,5 3,5 3,5 3,5 thay vì 3 3 3 3?

Như @ bodi0 đã nói chính xác , điều đó là không thể. Bạn phải mở rộng hệ thống lưới của Bootstrap (bạn có thể tìm kiếm và tìm thấy các giải pháp khác nhau, đây là ví dụ 7 cột) hoặc sử dụng các hàng lồng nhau, ví dụ: http://bootply.com/dd50he9tGe .

Trong trường hợp các hàng lồng nhau, bạn có thể không phải lúc nào cũng nhận được kết quả chính xác mà là kết quả tương tự

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Đám mây của bạn cũng chỉ cần ghi đè chiều rộng của Cột ...

<div class="col-md-1" style="width: 12.499999995%"></div>

Vì col-md-1là chiều rộng 8,33333333%; chỉ cần nhân 8.33333333 * 1.5 và đặt nó làm chiều rộng của bạn.

trong bootstrap 4, bạn cũng sẽ phải ghi đè thuộc tính flex và max-width:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

Câu trả lời ngắn gọn là không (về mặt kỹ thuật, bạn có thể đặt bất kỳ tên nào của lớp bạn muốn, nhưng điều này sẽ không có tác dụng, trừ khi bạn xác định lớp CSS của riêng mình - và hãy nhớ - không có dấu chấm trong bộ chọn lớp). Câu trả lời dài một lần nữa là không , bởi vì Bootstrap bao gồm một hệ thống lưới chất lỏng đầu tiên đáp ứng , di động, có quy mô thích hợp lên đến 12 cột khi kích thước cổng thiết bị hoặc chế độ xem tăng lên.

Các hàng phải được đặt trong .container(chiều rộng cố định) hoặc .container-fluid(chiều rộng toàn phần) để căn chỉnh và đệm thích hợp.

• Sử dụng các hàng để tạo các nhóm cột theo chiều ngang.
• Nội dung phải được đặt trong các cột và chỉ các cột mới có thể là con ngay lập tức của các hàng.
• Các lớp lưới được xác định trước thích .rowvà .col-xs-4có sẵn để nhanh chóng tạo bố cục lưới. Ít mixin hơn cũng có thể được sử dụng cho nhiều bố cục ngữ nghĩa hơn.
• Cột tạo rãnh (khoảng trống giữa nội dung cột) thông qua đệm. Khoảng đệm đó được bù đắp trong các hàng cho cột đầu tiên và cột cuối cùng thông qua việc bật lề âm .rows.
• Cột lưới được tạo bằng cách chỉ định số lượng mười hai cột có sẵn mà bạn muốn kéo dài. Ví dụ, ba cột bằng nhau sẽ sử dụng ba .col-xs-4.
• Nếu có nhiều hơn 12 cột được đặt trong một hàng, thì mỗi nhóm cột phụ, như một đơn vị, sẽ nằm trên một dòng mới.
• Các lớp lưới áp dụng cho các thiết bị có chiều rộng màn hình lớn hơn hoặc bằng kích thước điểm ngắt và ghi đè các lớp lưới được nhắm mục tiêu vào các thiết bị nhỏ hơn. Do đó, ví dụ: áp dụng bất kỳ .col-md-*lớp nào cho một phần tử sẽ không chỉ ảnh hưởng đến kiểu dáng của nó trên các thiết bị trung bình mà còn trên các thiết bị lớn nếu một .col-lg-*lớp không có mặt.

Một giải pháp khả thi cho vấn đề của bạn là xác định lớp CSS của riêng bạn với chiều rộng mong muốn , giả sử .col-half{width:XXXem !important}sau đó thêm lớp này vào các phần tử bạn muốn cùng với các lớp CSS Bootstrap gốc.

Bootstrap 4 sử dụng flex-box và bạn có thể tạo các định nghĩa cột của riêng mình

Điều này gần với 1,5, điều chỉnh theo nhu cầu của riêng bạn.

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Tạo các lớp mới để ghi đè chiều rộng. Xem jFiddle để biết mã làm việc.

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Như những người khác đã đề cập trong Bootstrap 3, bạn có thể sử dụng kỹ thuật lồng / nhúng.

Tuy nhiên, việc sử dụng tính năng khá tuyệt vời từ Bootstrap 4 ngày càng trở nên rõ ràng hơn. bạn đơn giản có tùy chọn sử dụng các col-{breakpoint}-autolớp (ví dụ col-md-auto) để tạo kích thước cột tự động dựa trên chiều rộng tự nhiên của nội dung của nó. kiểm tra cái này chẳng hạn

Theo phản hồi của Rex Bloom, tôi đã viết một trình trợ giúp bootstrap:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Bootstrap có các hiệu số cột, vì vậy nếu bạn muốn các cột có chiều rộng bằng nhau mà không chỉ định kích thước, hãy sử dụng điều này.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Ngoài ra, hãy xem liên kết này https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

Đây không phải là Chuẩn Bootstrap để cung cấp col-md-1.5 và bạn không thể chỉnh sửa bootstrap.min.css vì không đúng cách. bạn có thể tạo như thế này http://www.bootply.com/125259

bạn có thể sử dụng mã này bên trong col-md-3, col-md-9

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

Câu hỏi này khá cũ, nhưng tôi đã làm theo cách đó (trong TYPO3).

Thứ nhất, tôi đã tạo một lớp css có thể truy cập riêng mà tôi có thể chọn trên mọi phần tử nội dung theo cách thủ công.

Sau đó, tôi đã tạo phần tử ba cột bên ngoài với 11 cột (1 - 9 - 1), cuối cùng, tôi đã sửa đổi chiều rộng cột của cột đầu tiên và cột thứ ba với CSS thành 12,499999995%.