সারি সারি সংযুক্ত বুটস্ট্র্যাপ (সারি স্প্যান)

Question

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

নীচের ছবিতে আমি কী অর্জন করতে চাই তা চিত্রিত করা উচিত।

আমি যে একমাত্র কাজের সমাধান পেয়েছি তা হল টেবিলগুলি ব্যবহার করা তবে আমার এই ধারণাটি পছন্দ হয় না কারণ আমার মতামতটি সারণী ব্যবহারের সাথে প্রতিক্রিয়াশীলতা কাজ করবে না।

কারও কি এর কোনও মার্জিত সমাধান আছে? আমার করা বেশিরভাগ ওয়েব লেআউটের জন্য সূক্ষ্ম স্তরের নমনীয়তা প্রয়োজন হবে যদি আমি এখানে দরকারী কিছু বেছে নিতে পারি তবে তা দুর্দান্ত হবে great

Answer 1

ডিভসটি ডিফল্টরূপে উল্লম্বভাবে স্ট্যাক করে, তাই কোনও কলামের মধ্যে "সারিগুলি" বিশেষ হ্যান্ডলিংয়ের প্রয়োজন হয় না।

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

এখানে বেহালার ।

Comments

অনেক ধন্যবাদ. এটাই আমি খুঁজছিলাম! আমি আশা করি বুটস্ট্রাপ ডকুমেন্টেশনগুলি নীড় বাঁধার কলামগুলির অধীনে এটিকে উল্লেখ করেছে কারণ পদ্ধতির মূলত একইরকম।

— সিওং লি

আপনার উদাহরণে আপনি সংজ্ঞায়িত 1row=25px, 2row=50px। আপনি কি স্প্যানড ডিভকে পুরো সারির চেয়ে উঁচুতে বানাতে পারেন? যোগ করার চেষ্টা করেও .row{height:100%;}তা যায় নি।

— টোমর ডাব্লু

হ্যাঁ, @ কার্টারের মূল উদাহরণটি বুটস্ট্র্যাপ 3 এর সাথে সামঞ্জস্যপূর্ণ ছিল না; আমি এটা সংশোধন করেছি।

— পল কেইস্টার

উদাহরণটিতে দ্বিতীয় সারিতে নিকাশ রয়েছে যা দেখতে অদ্ভুত দেখাচ্ছে।

— কনি ডিসিনকো

Answer 2

আপনার বুটস্ট্র্যাপ কলাম নেস্টিং ব্যবহার করা উচিত।

দেখুন বুটস্ট্র্যাপ 3 বা বুটস্ট্র্যাপ 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(ফিডল স্ক্রিনে, ফলাফলটি দেখতে আপনার পরীক্ষার পর্দা বড় করুন, কারণ আমি কল - এমডি - * ব্যবহার করছি , তারপরে প্রতিক্রিয়াশীল স্ট্যাক কলাম)

দ্রষ্টব্য : আমি নিশ্চিত নই যে BS2 কলামগুলি বাসা বাঁধার অনুমতি দেয় , কিন্তু পল কেইস্টার এর উত্তরে, কলামগুলি নেস্টিং ব্যবহার করা হয়নি। আপনার এটি ব্যবহার করা উচিত এবং বুটস্ট্র্যাপ ভাল করার সময় সিএসএস পুনরায় উদ্ভাবন করা এড়ানো উচিত।

কলামগুলির উচ্চতা স্বয়ংক্রিয়, আপনি যদি একটি দ্বিতীয় লাইন যুক্ত করেন (যেমন আমি আমার উদাহরণে করি), কলামের উচ্চতা নিজেই খাপ খায়।

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি বক্সের বাইরে বুটস্ট্র্যাপের সাথে কাজ করে এবং কোনও সিএসএস টুইট করার প্রয়োজন নেই

— চীনবাবগুলি

গৃহীত উত্তর আরও পাঠযোগ্য; এটিতে একটি কোড স্নিপেট এবং জেএসফিডেলের একটি লিঙ্ক এবং আইএমএইচও পল কেইস্টার উদাহরণ অ্যালক্যালেনের উদাহরণগুলির চেয়ে আরও স্পষ্ট। এজন্য আমি মনে করি যে পল কেস্টারকে গ্রহণযোগ্য উত্তর হিসাবে রাখা উচিত, কমপক্ষে অ্যালক্যালেনের উত্তর উন্নত না হওয়া পর্যন্ত।

— নেক্সা

আমার ব্রাউজারে অ্যালক্যালিন (ক্রোম) আপনার উত্তর থেকে লিঙ্কযুক্ত ফিডাল প্রত্যাশিত ফলাফল তৈরি করে না (প্রশ্নের চিত্র দেখুন)। আসল ফলাফলটি একটি কলামে সব ডিভ-এ সাজানো।

— নেক্সা

আপনি যদি সমস্ত প্রান্তিককৃত স্প্যানগুলির সাথে একটি একক কলাম দেখতে পান তবে এটি -md-প্রতিক্রিয়াশীল নিয়মের কারণ । প্রত্যাশিত ফলাফল দেখতে আপনাকে অবশ্যই আপনার পর্দা বড় করতে হবে। আপনি ছোট স্ক্রিনে কলাম হিসাবে প্রদর্শনের জন্য নিজের ধারন প্রয়োজন হয়, তাহলে প্রতিস্থাপন -md-দ্বারা -sm-বা -xs-। এটি একটি ব্রেকপয়েন্ট পয়েন্ট ( বুটস্ট্র্যাপডোকস . com/ v3.0.3/docs/css/#grid দেখুন )।

— অ্যালক্যালেন

Answer 3

দ্রষ্টব্য: এটি বুটস্ট্র্যাপ 2 এর জন্য ছিল (যখন প্রশ্ন জিজ্ঞাসা করা হয়েছিল তখন প্রাসঙ্গিক)।

আপনি row-fluidবিদ্যমানটির মধ্যে একটি তরল (শতাংশ) ভিত্তিক সারি ব্যবহার করে এটি অর্জন করতে পারেন block।

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

এখানে একটি জেএসফিডেলের উদাহরণ ।

আমি লক্ষ্য করেছি যে সেখানে row-fluidপ্রথমটির পরে স্প্যানগুলির জন্য একটি বিজোড় বাম মার্জিন উপস্থিত হয়েছিল (বা প্রদর্শিত হবে না) । এটি একটি ছোট সিএসএস টুইকের সাথে ঠিক করা যেতে পারে (এটি একই সিএসএস যা প্রথম সন্তানের ক্ষেত্রে প্রয়োগ করা হয়, প্রথম সন্তানের অতীতে যারা প্রসারিত হয়):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Comments

আপনার প্রচেষ্টার জন্য ধন্যবাদ তবে মনে হচ্ছে আমার নির্বাচিত উত্তরের পরামর্শ অনুসারে এটি একটি সারিতে সারি-তরল ব্যবহার করতে হবে না। আমি যদিও সত্যিই এটি প্রশংসা করি!

— সিওং লি

খুব সত্য, তবে row-fluidযখন অভ্যন্তরীণ সারিগুলিকে উপ-বিভাজন শুরু করার সময় আসে তখন ভুলে যাবেন না ।

— পিকপিজি

Answer 4

এটি পরীক্ষা করুন। আশা করি এটি আপনার জন্য পূর্ণ সাহায্য করবে।

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

Answer 5

পলের উত্তর বুটস্ট্র্যাপের উদ্দেশ্যকে পরাজিত বলে মনে হচ্ছে; ভিউপোর্ট / স্ক্রিন আকারের ক্ষেত্রে প্রতিক্রিয়াশীল।

প্রতিক্রিয়া বজায় রেখে সারি এবং কলামগুলিকে নেস্ট করে আপনি একই ফলাফল অর্জন করতে পারেন।

এই সমস্যার একটি আপ-টু ডেট প্রতিক্রিয়া এখানে;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

আপনি এখানে কোডেপেন দেখতে পারেন ।

Answer 6

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Comments

এটি <ডি ক্লাস = "কল-স্ম -২"> <ডি ক্লাস = "কল-এলজি -4 কল-এমডি -4 কল-এসএম -4 কল-এক্সএস -4" স্টাইল = "ব্যাকগ্রাউন্ড- নিয়ে আমার পক্ষে কাজ করছে না- রঙ: হলুদ; "> <ইনপুট টাইপ =" ফাইল "আইডি =" imgInp "নাম =" ইমজি "গ্রহণ ="। "শ্রেণি =" ফর্ম-নিয়ন্ত্রণ "id =" imgName "আকার =" 40 "> </ ইনপুট> -> <img id =" img-আপলোড "src =" "Alt =" ট্রান্সপোর্টার "প্রস্থ =" 300% " উচ্চতা = "50%" শ্রেণি = "বৃত্তাকার বৃত্ত" /> </div> </div> </div>

— সুদীপ সিং

আপনার কোড চারপাশে ব্যাখ্যা যোগ করুন। যাতে ওপি এবং ভবিষ্যতের পাঠক সহজেই আপনার উত্তরটি বুঝতে পারে।

— সঙ্গম বেলোস