css - টুইটার বুটস্ট্র্যাপ ব্যবহার করে একটি কলাম কেন্দ্র




twitter-bootstrap twitter-bootstrap-3 (20)

টুইটার বুটস্ট্র্যাপ 3 এ কন্টেইনারের মধ্যে একটি কলামের আকারের ডিভিকে আমি কীভাবে করবো (12 কলাম)।

স্টার্টার fiddle দেখতে দয়া করে।

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

সুতরাং, আমি একটি div চাই, একটি ধারক ধারক মধ্যে কেন্দ্রীভূত centered সঙ্গে। একাধিক divs আছে যদি আমি একটি সারি ব্যবহার করতে পারেন, কিন্তু এখন জন্য আমি কনটেইনার (12 কলাম) কেন্দ্রীভূত এক কলাম আকার সঙ্গে একটি div চান।

আমি অর্ধেক অর্ধেক অফসেট না করার অভিপ্রায় হিসাবে উপরে পদ্ধতির যথেষ্ট ভাল নিশ্চিত না। আমি div এবং বাইরে div সঙ্কুচিত বিষয়বস্তু এর বাইরে বিনামূল্যে স্পেস প্রয়োজন নেই। আমি div এর বাইরে স্থান খালি সমানভাবে বিতরণ করতে চাই (কন্টেইনার প্রস্থ == এক কলাম পর্যন্ত সঙ্কুচিত)।


আমরা টেবিল লেআউট প্রক্রিয়া ব্যবহার করে এটি অর্জন করতে পারি:

প্রক্রিয়াটি হল:

  1. এক div মধ্যে সব কলাম মোড়ানো।
  2. একটি নির্দিষ্ট বিন্যাস সঙ্গে একটি টেবিল হিসাবে যে div করুন।
  3. একটি টেবিল সেল হিসাবে প্রতিটি কলাম করুন।
  4. বিষয়বস্তু অবস্থান নিয়ন্ত্রণ করতে উল্লম্ব-সারিবদ্ধ সম্পত্তি ব্যবহার করুন।

নমুনা ডেমো here


Offsetting আরেকটি পদ্ধতির দুটি খালি সারি আছে, উদাহরণস্বরূপ:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

আপনি যদি আপনার সারিতে এটি রাখেন, তবে ভিতরে থাকা সমস্ত কলাম কেন্দ্র করা হবে:

.row-centered {
    display: flex;
    justify-content: space-between;
}

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করেন তবে নোট করুন, আপনি আপনার row .align-items-center ব্যবহার করতে পারেন কারণ বোস্ট্র্যাপ 4 এখন ফ্ল্যাশ সিস্টেম ব্যবহার করে।


আমি কেবল ক্লাস text-center ব্যবহার করার পরামর্শ দিই:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

আরো সুনির্দিষ্ট বুটস্ট্র্যাপ এর গ্রিড সিস্টেমে 1২ কলাম রয়েছে এবং যে কোনও সামগ্রীকে কেন্দ্র করার জন্য বলা যাক, উদাহরণস্বরূপ, সামগ্রীটি একটি কলাম নেয়। বুটস্ট্র্যাপের গ্রিডের দুটি কলাম দখল করতে হবে এবং দুটি দখলকৃত কলামের অর্ধেকের মধ্যে সামগ্রী রাখতে হবে।

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'কোল-এক্স-অফসেট -5' গ্রিড সিস্টেমে যেখানে বিষয়বস্তু স্থাপন করা শুরু করতে বলছে।

'col-xs-2' গ্রিড সিস্টেমটিকে বলছে যে কলামগুলির উপর বামে থাকা কতগুলি সামগ্রী দখল করা উচিত।

'কেন্দ্রিক' একটি সংজ্ঞায়িত বর্গ হবে যা বিষয়বস্তুকে কেন্দ্র করবে।

এই উদাহরণটি কিভাবে বুটস্ট্র্যাপ এর গ্রিড সিস্টেমের মতো দেখায়।

কলাম:

1 | ২ | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... অফসেট ...... ড। .......ব্যবহার করা হয় না........


এইটা কাজ করে. সম্ভবত একটি হ্যাকিশ উপায়, কিন্তু এটি চমত্কারভাবে কাজ করে। এটি প্রতিক্রিয়াশীল (Y) জন্য পরীক্ষা করা হয়।

.centered {
    background-color: teal;
    text-align: center;
}


একটি বুটস্ট্র্যাপ সারিতে একাধিক কলামকে কেন্দ্র করতে - এবং কোলগুলির সংখ্যা অদ্ভুত, কেবল এই css শ্রেণীটিকে সেই সারির সমস্ত কলামে যুক্ত করুন:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

সুতরাং আপনার এইচটিএমএল আপনার মত কিছু আছে:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

এটা চেষ্টা কর

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

আপনি অন্যান্য col হিসাবে col-md-2 , ইত্যাদি ব্যবহার করতে পারেন।


এটি আমার কোড নয়, তবে এটি পুরোপুরি কাজ করে (বুটস্ট্র্যাপ 3 এ পরীক্ষিত) এবং আমার কাছে কল অফসেটের সাথে ঘন ঘন জাগানো নেই।

ডেমো:

/* centered columns styles */

.row-centered {
  text-align: center;
}

.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row row-centered">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>


কওয়াল_দেভ তার পদ্ধতিতে 1 ব্যবহার করে, আমি কেন্দ্রীয়-ব্লক বা মার্জিনের পরিবর্তে অফসেট পদ্ধতি পছন্দ করি, যা সীমিত ব্যবহার করে, কিন্তু তিনি উল্লেখ করেছেন:

এখন, এই পদ্ধতির জন্য একটি সুস্পষ্ট ত্রুটি রয়েছে, এটি শুধুমাত্র কলামের আকারের জন্য কাজ করে, তাই শুধুমাত্র .col-x-2, .col-x-4, col-x-6, col-x-8 এবং col-x- 10 সমর্থিত হয়।

এই অদ্ভুত কলামের জন্য নিম্নলিখিত পদ্ধতি ব্যবহার করে সমাধান করা যেতে পারে।

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

কল সেন্টার করতে - আমাদের নীচের কোডটি ব্যবহার করতে হবে। কোলগুলি মার্জিন অটো ছাড়াও ভাসমান উপাদান। আমরা এটি float কেউ সেট করা হবে,

<body class="container">
    <div class="col-lg-1 col-md-4 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

কেন্দ্রে ক্লাস সহ উপরের কল-এলজি -1 কে কেন্দ্র করে, আমরা লিখব:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

DIV এর ভিতরে বিষয়বস্তু কেন্দ্র করতে, text-align:center ব্যবহার text-align:center ,

.centered {
    text-align: center;
}

আপনি কেবল ডেস্কটপ এবং বড় স্ক্রীনে এটি কেন্দ্রীভূত করতে চান, মোবাইলে নয়, তাহলে নিম্নলিখিত মিডিয়া ক্যোয়ারীটি ব্যবহার করুন।

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

এবং শুধুমাত্র মোবাইল সংস্করণে DIV কেন্দ্র করতে নীচের কোডটি ব্যবহার করুন।

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

কেন্দ্র কলামগুলিতে আমার পদ্ধতি display: inline-block ব্যবহার করা হল display: inline-block কলাম এবং text-align: center জন্য display: inline-block text-align: center ধারক পিতার জন্য text-align: center

আপনি শুধু row সিএসএস ক্লাস 'কেন্দ্রিক' যুক্ত করতে হবে।

এইচটিএমএল:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

সিএসএস:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

জেএসফিল্ড: http://jsfiddle.net/steyffi/ug4fzcjd/


কেবল আপনার কাস্টম সিএসএস ফাইলটিতে এটিকে যোগ করুন, বুটস্ট্র্যাপ সিএসএস ফাইলগুলি সম্পাদনা করা সরাসরি সুপারিশ করা হয় না এবং এটি আপনার সিডিএন ব্যবহার করার ক্ষমতা বাতিল করে দেয়।

.center-block {
    float: none !important
}

কেন?

বুটস্ট্র্যাপ সিএসএস (ভের 3.7 এবং নিচের) ব্যবহার: মার্জিন: 0 অটো; , কিন্তু আকার আকার ধারক ভাসমান সম্পত্তি দ্বারা overridden পায়।

PS : আপনি এই ক্লাস যোগ করার পরে সঠিক আদেশ দ্বারা ক্লাস সেট করতে ভুলবেন না।

<div class="col-md-6 center-block">Example</div>

বুটস্ট্র্যাপ ভি 4 দিয়ে, এটি কেবল .row <div> .justify-content-center যুক্ত করে সম্পন্ন করা যেতে পারে

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content


যখন আপনার গ্রিডটি পূরণ করার সঠিক সংখ্যা নেই তখন স্ক্রিনের কলাম উপাদানগুলি কেন্দ্রীভূত করার জন্য, ক্লাসের নামগুলি ফেরত দিতে আমি জাভাস্ক্রিপ্টের একটি সামান্য অংশ লিখেছি:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

যদি আপনার 5 টি উপাদান থাকে এবং আপনি একটি md স্ক্রীনে 3 প্রতি সারি রাখতে চান তবে আপনি এটি করেন:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

মনে রাখবেন, দ্বিতীয় যুক্তি 12 দ্বারা বিভাজনযোগ্য হতে হবে।


শুধুমাত্র আপনার এক কলাম সেট করুন যা col-xs-12 এ সামগ্রী প্রদর্শন করে (মোবাইল-প্রথম ;-) এবং আপনার কেন্দ্রীভূত সামগ্রীটি কতটুকু বিস্তৃত রাখতে চান তা নিয়ন্ত্রণ করতে কেবল কন্টেইনার কনফিগার করুন, তাই:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

একটি ডেমো জন্য, http://codepen.io/Kebten/pen/gpRNMe :-) দেখুন


বুটস্ট্র্যাপ সংস্করণ 3 একটি। টেক্সট কেন্দ্র বর্গ।

শুধু এই ক্লাস যোগ করুন:

text-center

এটা কেবল এই শৈলী লোড করা হবে:

.text-center {
    text-align: center;
}

উদাহরণ:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

পদ্ধতি 1:

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

পদ্ধতি 2:

সিএসএস

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

বুটস্ট্র্যাপ টিপস, উদাহরণ এবং সরঞ্জাম: OnAirCode


বুটস্ট্র্যাপ 3 এ এখন একটি অন্তর্নির্মিত ক্লাস আছে .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

যদি আপনি এখনও 2.x ব্যবহার করেন তবে আপনার CSS এ এটি যোগ করুন।





centering