Bootstrap 3.0 - Sabit Sütun Boyutlarını içeren Değişken Izgara

Bootstrap'i nasıl kullanacağımı öğreniyorum. Şu anda, düzenler arasında ilerliyorum. Bootstrap oldukça havalı olsa da, gördüğüm her şey eski görünüyor. Hayatım boyunca, anlayamadığım temel bir düzen olduğunu düşündüğüm bir şeye sahibim. Düzenim aşağıdaki gibi görünüyor:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

Bu ızgaranın, pencerenin tüm yüksekliğini kaplaması gerekir. Anladığım kadarıyla sabit ve akışkan genişlikleri karıştırmam gerekiyor. Ancak Bootstrap 3.0 artık akışkan sınıfına sahip görünmüyor. Olsa bile, akışkan ve sabit kolon boyutlarını nasıl karıştıracağımı çözemiyorum. Bootstrap 3.0'da bunu nasıl yapacağını bilen var mı?

Bootstrap 3 ile akışkan ve sabit genişlikleri karıştırmanın gerçekten kolay bir yolu yoktur. Izgara sistemi akıcı ve duyarlı bir şey olacak şekilde tasarlandığından, bunun böyle olması amaçlanmıştır. Bir şeyi hacklemeyi deneyebilirsiniz, ancak bu, Responsive Grid sisteminin yapmaya çalıştığı şeye ters düşecektir, amacı bu düzeni farklı cihaz türleri arasında akıtmaktır.

Bu düzene bağlı kalmanız gerekiyorsa, sayfanızı özel CSS ile düzenlemeyi ve ızgarayı kullanmamayı düşünürüm.

düzenleme: Pek çok insan bunu yapmak istiyor gibi göründüğünden, burada daha genel bir kullanım senaryosu olan kısa bir kılavuz yazdım https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Umarım yardımcı olur.

Bootstrap3 ızgara sistemi, sabit genişlikte yan menülere izin vermek için kök satırı ayarlamanıza izin veren satır iç içe geçirmeyi destekler.

Kök satıra sol dolgu koymanız, ardından normal ızgara düzeni öğelerinizi içeren bir alt satıra sahip olmanız gerekir.

Bunu genellikle böyle yapıyorum http://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

css

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

veya table-cell ile display özelliğini kullanın;

css

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

Biraz farklı bir sorun yaşadım:

• Sabit ve değişken sütunları tam pencere düzeninin parçası olarak değil, bir tablonun parçası olarak birleştirmem gerekiyordu
• Hem sola hem de sağa sabitlenmiş sütunlara ihtiyacım vardı
• İçeren satırın tam yüksekliğini kullanan sütun arka planları konusunda endişelenmedim

Sonuç olarak, floatsol ve sağ sütunlara başvurdum ve rowaradaki akışkan sütunları yapmak için Bootstrap'leri kullanabilirim .

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

Güncellenmiş 2018

IMO, Bootstrap 3'te buna yaklaşmanın en iyi yolu, Bootstrap'in kesme noktaları ile hizalanan ortam sorgularını kullanmaktır, böylece yalnızca sabit genişlikteki sütunları daha büyük ekranlar olarak kullanırsınız ve daha sonra mizanpajın daha küçük ekranlarda yanıt vermesine izin verirsiniz. Bu şekilde duyarlılığı korursunuz ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

Bootstrap 4 flexbox'a sahip olduğundan, bunun gibi düzenler çok daha kolay olacaktır: http://www.codeply.com/go/eAYKvDkiGw

Tamam, cevabım çok güzel:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

jsfiddle oyun alanı

tüm tarayıcıları desteklemek istiyorsanız, https://github.com/10up/flexibility kullanın

GÜNCELLEME 2014-11-14: Aşağıdaki çözüm çok eski, esnek kutu düzen yöntemini kullanmanızı tavsiye ederim. İşte bir genel bakış: http://learnlayout.com/flexbox.html

Çözümüm

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

SCSS

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

Çok fazla önyükleme düzen kodunu değiştirmeden.

Güncelleme (OP'den değil): Bu cevabın anlaşılmasını kolaylaştırmak için aşağıya kod parçacığı ekleme. Ancak beklendiği gibi çalışmıyor.

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

Neden sadece sol iki sütunu kendi css'nizde sabit olarak ayarlayıp ardından içeriğin geri kalanı için 12 sütunun tamamını içeren yeni bir ızgara düzeni oluşturmuyorsunuz?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>