আমি বুটস্ট্র্যাপ নবাবী এবং আমার কাছে 100% প্রশস্ত টেম্পলেট রয়েছে যা আমি বুটস্ট্র্যাপের সাথে কোড করতে চাই। প্রথম কলামটি বাম কোণে শুরু হয় এবং আমার কাছে ডানদিকে প্রসারিত একটি Google মানচিত্র রয়েছে। আমি ভেবেছিলাম আমি container-fluidক্লাসের সাথে এটি করতে পারি তবে এটি আর উপলব্ধ হবে না। বুটস্ট্র্যাপ 3 দিয়ে কীভাবে এই বিন্যাসটি অর্জন করবেন তা সম্পর্কে আমার কোনও ধারণা নেই I ভূ-সামাজিক-networkr / 4752268
উত্তর:
বুটস্ট্র্যাপ 3 এর জন্য আপনাকে একটি কাস্টম মোড়ক ব্যবহার করতে হবে এবং এর প্রস্থটি 100% এ সেট করতে হবে।
.container-full {
margin: 0 auto;
width: 100%;
}বুটপ্লি সম্পর্কে একটি কার্যকারী উদাহরণ এখানে
আপনি যদি কাস্টম ক্লাস যুক্ত না করা পছন্দ করেন তবে আপনি col-lg-12( প্রশস্ত বিন্যাস ডেমো ) এর ভিতরে সমস্ত কিছু মোড়ানো দ্বারা খুব প্রশস্ত বিন্যাস (100% নয়) অর্জন করতে পারবেন
বুটস্ট্র্যাপ ৩.১-এর জন্য আপডেট
container-fluid(কোন অতিরিক্ত সিএসএস প্রয়োজন) বর্গ, বুটস্ট্র্যাপ 3.1 মধ্যে ফিরে এসেছে তাই এটি একটি পুরো প্রস্থ বিন্যাস তৈরি করতে ব্যবহার করা যেতে পারে ..
এই জন্য সম্পূর্ণ মৌলিক কাঠামো 100% প্রস্থের বিন্যাস মধ্যে বুটস্ট্র্যাপ v3.0.0 । আপনার ক্লাস <div class="row">দিয়ে মোড়ানো উচিত নয় container। কারণ containerশ্রেণি প্রচুর পরিমাণে মার্জিন নেবে এবং এটি আপনাকে পূর্ণ স্ক্রিন (100% প্রস্থ) লেআউট সরবরাহ করবে না যেখানে বুটস্ট্র্যাপ তাদের মোবাইল-প্রথম সংস্করণ v3.0.0 থেকে ধারক-তরল শ্রেণীর সরিয়ে ফেলেছে।
সুতরাং কেবল <div class="row">ধারক শ্রেণী ছাড়াই লেখা শুরু করুন এবং আপনি 100% প্রস্থের বিন্যাসের সাথে যেতে প্রস্তুত।
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Basic 100% width Structure</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/assets/js/html5shiv.js"></script>
<script src="http://getbootstrap.com/assets/js/respond.min.js"></script>
<![endif]-->
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-3 red">Test content</div>
<div class="col-md-9 green">Another Content</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>নিজেই ফলাফল দেখতে আমি একটি বুটপ্লি তৈরি করেছি। সেখানে সরাসরি আউটপুট দেখুন। http://bootply.com/82136 এবং সম্পূর্ণ বেসিক বুটস্ট্র্যাপ 3 100% প্রস্থের লেআউটটি আমি একটি টুকরোটি তৈরি করেছি। আপনি এটি ব্যবহার করতে পারেন। থেকে সারকথা পান এখানে
আপনার আরও সহায়তার প্রয়োজন হলে আমাকে জবাব দিন। ধন্যবাদ।
.container-full { padding: 0 15px; }
.rowকি একটি মধ্যে থাকা প্রয়োজন .container?
বুটস্ট্র্যাপ ৩.৩.৫ ব্যবহার করে এবং .container-fluidমোবাইলে কোনও জলের বা অনুভূমিক স্ক্রোলিংয়ের সাথে আমি পুরো প্রস্থটি এইভাবে পাই। নোট যা .container-fluidপুনরায় চালু করা হয়েছিল 3.1।
মোবাইল / ট্যাবলেটে পূর্ণ প্রস্থ, ডেস্কটপে 1/4 স্ক্রিন
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div class="col-md-4 col-md-offset-4" style="padding-left: 0, padding-right: 0"> <!-- col classes adds 15px padding, so remove the same amount -->
<!-- Full-width for mobile -->
<!-- 1/4 screen width for desktop -->
</div>
</div>
</div>সমস্ত রেজোলিউশনে সম্পূর্ণ প্রস্থ (মোবাইল, টেবিল, ডেস্কটপ)
<div class="container-fluid"> <!-- Adds 15px left/right padding -->
<div class="row"> <!-- Adds -15px left/right margins -->
<div>
<!-- Full-width content -->
</div>
</div>
</div>আপনি ঠিক ব্যবহার করছেন div.container-fluidএবং আপনার একটি div.rowশিশুও দরকার । তারপরে, সামগ্রীটি কোনও গ্রিড কলাম ছাড়াই ভিতরে রাখতে হবে। আপনার যদি ডক্সের দিকে নজর থাকে তবে আপনি এই পাঠ্যটি পেতে পারেন:
- সারি আবশ্যক সঠিক প্রান্তিককরণ এবং প্যাডিং জন্য একটি .container (স্থায়ী-প্রস্থের) অথবা .container-তরল (সম্পূর্ণ-প্রস্থ) মধ্যে স্থাপন করা।
- কলামগুলির অনুভূমিক দলগুলি তৈরি করতে সারি ব্যবহার করুন।
এখানে বর্ণিত গ্রিড কলামগুলি ব্যবহার করা ঠিক নয়:
- সামগ্রীগুলি কলামগুলির মধ্যে রাখা উচিত এবং কেবলমাত্র কলামগুলিই সারিগুলির অবিলম্বে শিশু হতে পারে।
এবং এই উদাহরণটি দেখে আপনি এই লেখাটি পড়তে পারেন:
পূর্ণ প্রস্থ, একক কলাম : পূর্ণ-প্রস্থের উপাদানগুলির জন্য কোনও গ্রিড শ্রেণি প্রয়োজন।
সঠিক লেআউটটি ব্যবহার করে কিছু উপাদান দেখানো এখানে একটি সরাসরি উদাহরণ' s এইভাবে আপনার কোনও কাস্টম সিএসএস বা হ্যাকের দরকার নেই।
বুটস্ট্র্যাপ 4 এ আপনি ব্যবহার করতে পারেন
<div class="row m-0">
my fullwidth div
</div>... আপনি যদি মাত্র .m-0 ব্যতীত একটি শীর্ষ স্তরের ডিভ হিসাবে একটি অ্যারো ব্যবহার করেন তবে আপনার অযাচিত মার্জিন থাকবে যা ব্রাউজার উইন্ডোর চেয়ে পৃষ্ঠাটিকে আরও প্রশস্ত করে এবং একটি অনুভূমিক স্ক্রোলবারের কারণ করে।
@container-*প্রস্থকে 100% হিসাবে ব্যবহার করতে বুটস্ট্র্যাপ কাস্টমাইজ করতে পারেন । এছাড়াও,.container-fluid3.1.0 এ ফিরে আসছে। :)