বুটস্ট্র্যাপ 3.0 - ফ্লুড গ্রিড যা স্থির কলাম আকার ধারণ করে

Question

আমি বুটস্ট্র্যাপ কীভাবে ব্যবহার করব তা শিখছি। বর্তমানে, আমি লেআউটগুলির মাধ্যমে আমার পথে ঘোরা করছি। বুটস্ট্র্যাপটি বেশ দুর্দান্ত হলেও, আমি যা কিছু দেখি তা পুরানো মনে হয়। আমার জীবনের জন্য, আমি আমার কাছে যা মনে করি তা একটি বেসিক লেআউট যা আমি বুঝতে পারি না। আমার লেআউটটি নীচের মত দেখাচ্ছে:

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

এই গ্রিডটির উইন্ডোর পুরো উচ্চতা নেওয়া দরকার। আমার বোঝাপড়া থেকে, আমি স্থির এবং তরল প্রস্থ মিশ্রিত করা প্রয়োজন। তবে বুটস্ট্র্যাপ 3.0.০ এর আর তরল ক্লাস নেই বলে মনে হচ্ছে। এমনকি যদি তা হয় তবে আমি কীভাবে তরল এবং স্থির কলামের আকারগুলি মেশাতে পারি তা অনুভব করতে পারি না। কেউ কি বুটস্ট্র্যাপ 3.0 এ এটি করতে জানেন?

Comments

সারি এবং কলামগুলির পাশাপাশি সারণীগুলি ব্যবহার করে দেখুন।

— কালু

বুটস্ট্র্যাপ 3 এর জন্য এখানে একটি স্থির-তরল উদাহরণ রয়েছে: codeply.com/go/GN4QinVrjI

— জিম

Answer 1

বুটস্ট্র্যাপ 3 এর সাথে তরল এবং স্থির প্রস্থগুলিকে মিশ্রিত করার সত্যিই সহজ উপায় নেই meant এটি গ্রাড সিস্টেমটি একটি তরল, প্রতিক্রিয়াশীল জিনিস হিসাবে নকশাকৃত as আপনি কিছু হ্যাক করার চেষ্টা করতে পারেন, তবে এটি প্রতিক্রিয়াশীল গ্রিড সিস্টেমটি যা করার চেষ্টা করছে তার বিপরীতে যাবে, যার নকশাই বিভিন্ন ডিভাইসের প্রকারে সেই বিন্যাসটি প্রবাহিত করা।

আপনার যদি এই লেআউটটির সাথে লেগে থাকার প্রয়োজন হয় তবে আমি কাস্টম সিএসএস দিয়ে আপনার পৃষ্ঠাটি রাখার এবং গ্রিডটি ব্যবহার না করার বিষয়ে বিবেচনা করব।

Comments

আমার ধারণা, এই ধরণের জিনিসটির জন্য ফ্লেক্সবক্সের পুরো সমর্থন পাওয়ার জন্য অপেক্ষা করতে হবে, তবে এটি এখনও সত্যিই খোঁড়া। বুটস্ট্র্যাপের মডেল দুর্দান্ত যখন কলামগুলির সংখ্যা স্থিতিশীল থাকে তবে উদাহরণস্বরূপ, যদি আপনি গতিশীলভাবে কলামগুলি আড়াল করতে এবং প্রদর্শন করতে পারেন তবে কমপক্ষে একটি কলামের তরল হতে সহায়তা করার ফলে আরও অনেক কিছু বোঝা শুরু হয়।

— নাট বান্দি

দয়া করে সমাধানের সাথে এই লিঙ্কটিতে একটি রেফারেন্স অন্তর্ভুক্ত করতে আপনার উত্তরটি সম্পাদনা করুন। সম্মান: স্ট্যাকওভারফ্লো.com

— জিজ্ঞাসা

Answer 2

সম্পাদনা: যেহেতু প্রচুর লোকেরা এটি করতে চায় বলে মনে হচ্ছে, আমি এখানে একটি আরও সাধারণ ব্যবহারের ক্ষেত্রে একটি ছোট গাইড লিখেছি https://www.atlascode.com/bootstrap-fixed-width-sidebars/ । আশা করি এটা সাহায্য করবে.

বুটস্ট্রাইপি ৩ গ্রিড সিস্টেমটি সারি নেস্টিং সমর্থন করে যা আপনাকে স্থির প্রস্থের মেনুগুলির স্থির করতে রুট সারিটি সামঞ্জস্য করতে দেয়।

আপনাকে মূল সারিতে একটি প্যাডিং-বামে রাখতে হবে, তারপরে একটি সন্তানের সারি থাকবে যাতে আপনার সাধারণ গ্রিড লেআউট উপাদান থাকে।

এখানে আমি সাধারণত এটি করি কীভাবে http://jsfiddle.net/u9gjjebj/

এইচটিএমএল

<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;
}

Comments

এটি একটি দুর্দান্ত তবে আপনি যদি স্থির কলামের ভিতরে রাখেন যেমন এই <p> <a class="btn btn-default" href="#" ভূমিকা="button"> বিশদ দেখুন & raquo; </a> </p> বা বুটস্ট্র্যাপ ড্রপডাউন তারপর এগুলি স্থির কলামে কাজ করছে না। এই জন্য কোন ফিক্স আছে?

— ভ্যাকলাভ ইলিয়াস

@ ভ্যাকলাভ ইলিয়াস এই ক্ষেত্রে একটি পূর্ণ আকারের পার্থক্য রাখার চেষ্টা করুন: আপেক্ষিক এবং তারপরে ড্রপডাউন? আপনি যদি সমস্যাটি দেখানোর জন্য jsfiddle তৈরি করেন এটি আপনাকে সহায়তা করে

— w00t

এটি এখনও সমস্ত ব্রাউজারগুলিতে কীভাবে কাজ করে তা আমি দেখতে পাইনি অন্যথায়, ভাল কাজ, ভাল হয়েছে done

— ফিল কুপার

ডান হাতের স্থির কলামগুলির সাথে এটি করার কোনও উপায় আছে?

— শন

position: fixedএর অর্থ হ'ল column কলামটির বিষয়বস্তু স্ক্রোল করার সময় বাকী পৃষ্ঠাটির উপরে। আমার ক্ষেত্রে আমি এটি ব্যবহার করে স্থির করেছি position: absolute।

— লরেন্ট

Answer 3

বা টেবিল-কক্ষের সাথে প্রদর্শন সম্পত্তি ব্যবহার করুন;

CSS

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

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

এইচটিএমএল

<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/

Comments

সমস্যা যখন আপনি প্রাক্তন ব্যবহার করা হয়। v। দৃশ্যমান-এক্স , becouse প্রদর্শন: টেবিল-সেল `হয়ে display:block...

— দরিউস ফিলিপিয়াক

Answer 4

আমার কিছুটা আলাদা সমস্যা ছিল:

• আমার একটি পূর্ণ উইন্ডো বিন্যাসের অংশ না হয়ে স্থির এবং তরল কলামগুলি টেবিলের অংশ হিসাবে একত্রিত করতে হবে
• আমার কলামগুলি বাম এবং ডান উভয় স্থির করা দরকার
• সমন্বিত সারিটির পূর্ণ উচ্চতা ব্যবহার করে আমি কলামের পটভূমি সম্পর্কে উদ্বিগ্ন ছিলাম না

ফলস্বরূপ, আমি floatবাম এবং ডান কলামগুলির জন্য অবলম্বন করেছি এবং তারপরে বুটস্ট্র্যাপ ব্যবহার করতে পারতাম এর rowমধ্যে তরল কলামগুলি করতে।

<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>

Comments

@ স্মৃতিযুক্ত আমার একটি প্রশ্ন ছিল না। আমি ব্যাখ্যা করেছি যে আমার কিছুটা আলাদা সমস্যা ছিল এবং আমি গুগল থেকে এখানে আগত অন্যান্য লোকদের সহায়তা করতে যে সমাধানটি এসেছি তা যুক্ত করেছিলাম।

— ধান ম্যান

আপনার উত্তর অমূল্য। বেশ সহজ এখনও আমার সমস্যা সমাধান। অনেক ধন্যবাদ.

— চার্লস

আপনার উত্তরটিতে থাকা ডিভিংটি থাকা মার্জিনটি আপনি কেন সারিটি ডিভটি দিতে পারবেন না?

— গ্রিনআসজেড

এই উত্তরটি গুরুত্ব সহকারে বৈধ। আপনার যদি বুটস্ট্র্যাপ কলামগুলি ব্যবহার করার প্রয়োজন হয় তবে নির্দিষ্ট স্ক্রিনের প্রস্থে সেগুলি ধসে পড়তে না চান তবে আপনার প্রয়োজন (উদাহরণস্বরূপ কল-এমডি -3 এর পরিবর্তে টান-বাম / টান-ডান ব্যবহার করুন)।

— স্যাম

এটি দুর্দান্ত উত্তর বলে মনে হচ্ছে। আমার সাথে marginএবং paddingআমার সারিতে মাঝখানে কিছুটা সমস্যা হচ্ছে তবে এটি একটি সমাধানযোগ্য সমস্যা হওয়া উচিত। এই পদ্ধতির গ্রহণের অযৌক্তিক পরিণতিগুলি কী কী?

— বিশাল

Answer 5

আপডেট হয়েছে 2018

আইএমও, বুটস্ট্র্যাপ 3 এ যাওয়ার সর্বোত্তম উপায়টি মিডিয়া ক্যোয়ারীগুলি ব্যবহার করবে যা বুটস্ট্র্যাপের ব্রেকপয়েন্টগুলির সাথে সামঞ্জস্য হয় যাতে আপনি কেবলমাত্র নির্দিষ্ট প্রস্থের কলামগুলিই বড় স্ক্রিনগুলি ব্যবহার করেন এবং তারপরে লেআউটটি ছোট পর্দায় প্রতিক্রিয়াশীলভাবে স্ট্যাক করতে দিন। এইভাবে আপনি প্রতিক্রিয়া রাখুন ...

@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

বুটস্ট্র্যাপ 4 এর মধ্যে ফ্লেক্সবক্স থাকবে সুতরাং এর মতো লেআউটগুলি আরও সহজ হবে: http://www.codeply.com/go/eAYKvDkiGw

Answer 6

ঠিক আছে, আমার উত্তর খুব সুন্দর:

<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 খেলার মাঠ

আপনি যদি সমস্ত ব্রাউজারের জন্য সমর্থন করতে চান তবে https://github.com/10up/flexibility ব্যবহার করুন

Answer 7

আপডেট 2014-11-14: নীচের সমাধানটি বেশ পুরানো, আমি ফ্লেক্স বক্স লেআউট পদ্ধতিটি ব্যবহার করার পরামর্শ দিচ্ছি। এখানে একটি ওভারভিউ দেওয়া হয়েছে: http://learnlayout.com/flexbox.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;
  }
}

খুব বেশি বুটস্ট্র্যাপ লেআউট কোড পরিবর্তন না করে।

---

আপডেট (ওপি থেকে নয়): এই উত্তরটি বোঝার সুবিধার্থে নীচে কোড স্নিপেট যুক্ত করুন। তবে এটি প্রত্যাশার মতো কাজ করছে বলে মনে হয় না।

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>

Comments

-1 এই উত্তরটি আমার কাছে কোনও অর্থ দেয় না। নাম এবং কীবোর্ড কলামগুলির ওভারল্যাপে কলামগুলি মোটামুটি নয়। আমি জানি না কিভাবে এটিতে +2 ভোট রয়েছে।

— মারিয়ানো দেশানজে

Answer 8

বাম দুটি কলামকে কেবল নিজের সিএসএসের সাথে স্থির করে কেন সেট করে বাকি কন্টেন্টের জন্য পূর্ণ 12 কলামের একটি নতুন গ্রিড বিন্যাস তৈরি করবেন না?

<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>

Comments

বুটস্ট্র্যাপে কেবল কলামগুলিই সারিগুলির তাত্ক্ষণিক শিশু হতে পারে।

— সাই দুব্বাকা