বুটস্ট্র্যাপ: আমি ধারকটির প্রস্থ কীভাবে পরিবর্তন করব?

Question

আমি স্থির ধারক শ্রেণীর সাথে একটি ওয়েবসাইট বিকাশের জন্য টুইটার বুটস্ট্র্যাপ ব্যবহার করেছি তবে এখন ক্লায়েন্টটি ওয়েবসাইটটি 1000px প্রস্থ নয় 1170px নয়। আমি .বিহীন ফাইলগুলি ব্যবহার করি না।

এটি ঠিক করার কোনও দ্রুত উপায় আছে?

Comments

এখানে উত্তরটি দেখুন , আমি মনে করি যে উত্তরটি আপনার সমস্যার সমাধান হবে কেবলমাত্র উত্তরের নির্দিষ্ট উত্তর দ্বারা iddle

— প্রিমিয়ার

@ প্রিম, টিএক্স তবে স্প্যান বা পাত্রে যেমন বুটস্ট্র্যাপের কোনও ক্লাস ব্যবহার করা হয়নি বলে আমি উদাহরণটি পাই না। আমার মনে হয় এই প্রকল্পের জন্য আমার যা প্রয়োজন তা হ'ল প্রতিক্রিয়াশীল বুটস্ট্র্যাপের সাহায্যে ধারকটির সর্বাধিক 940px সেট করা।

— অ্যালেক্স

Answer 1

বুটস্ট্র্যাপ সাইটে কাস্টমাইজ বিভাগে যান এবং আপনার পছন্দের আকারটি চয়ন করুন। আপনাকে সেট করতে হবে @gridColumnWidthএবং @gridGutterWidthভেরিয়েবলগুলি রাখতে হবে।

উদাহরণস্বরূপ: @gridColumnWidth = 65pxএবং @gridGutterWidth = 20pxএকটি 1000pxবিন্যাসে ফলাফল ।

তারপরে এটি ডাউনলোড করুন।

Comments

গ্রিড কলমউইথ এবং গ্রিডগটারউইথ ভেরিয়েবলগুলি পরিবর্তন করে কেউ সঠিক 1000px ধারকটিতে পৌঁছতে পারে না ... কারণ (12 * (গ্রিড কলমউইথ) + 12 (গ্রিডগটারউইথ)) 1000 এর সমান নয় And তাই কেবল আমিই সমাধানটি দিয়েছি। এটা কি ঠিক?

— প্রিম

তাত্ত্বিকভাবে, এমন অসীম সমন্বয়গুলি রয়েছে যা 1000 পিক্সের সাথে মেলে। একটি উদাহরণ: 12 * 65 + 11 * 20 = 1000 (কলামগুলির মধ্যে কেবল 11 টি জলের রয়েছে)।

— আলবার্তেভিগো

হাহ! আমি সত্যিই সহজ জিনিসটি চিনতে পারি নি ... যাইহোক আপনার উপযুক্ত সমাধান ছিল।

— প্রেম

আপনার পোস্টের জন্য ধন্যবাদ, এটি সহায়ক ছিল;) কেবল একটি নোট: ব্যবহারিকভাবে 1000px প্রস্থের জন্য পূর্ণ পিক্সেল ব্যবহার করে ঠিক 7 সমাধান থাকবে। (কলম প্রস্থ 10, 21, 32, 43, 54, 65 এবং 76)

— dfherr

@ ডিফার আপনি যখন "ব্যবহারিকভাবে" বলবেন তখন আপনার সঠিক অর্থটি আমি জানি না তবে দয়া করে মনে রাখবেন যে সিএসএস পিক্সেলের জন্য দশমিক মানগুলিকে সমর্থন করে। অতএব, অসীম সমাধান আছে। w3.org/TR/CSS21/syndata.html#leight-units

— আলবার্তেভিগো

Answer 2

সমাধান এখানে:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

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

Comments

সর্বাধিক উত্তর সিডিএন অবহেলা করে। আপনার উত্তর একটি নিখুঁত সমাধান।

— চার্লস ওয়াটসন

এটি সিডিএন ব্যবহার করা লোকদের জন্য উপযুক্ত। নির্মাণের সময় কম (যখন 4 উপস্থিত হয়, SASS) সংশোধন করা লোকেরা তাদের নিজস্ব বুটস্ট্র্যাপ সিএসএস হোস্ট করার জন্য উপযুক্ত। তবে প্রদত্ত একের পরে আমদানি করা একটি কাস্টম এলইএসএস (বা SASS) সংশোধন করার অর্থ আপনি কোনও ডিফ না করেই অন্তর্নিহিত এলইএসসি আপগ্রেড করতে পারেন।

— গ্রেগ পেটিট

আমি জানি এটি সত্যিই দেরি হয়ে গেছে, তবে প্রদত্ত পাতাগুলি এখন প্রস্থটি যুক্ত করুন: উপরের কোডটিতে স্বয়ংক্রিয়ভাবে আপনি পাত্রে তাদের 1170 ম্যাক্সারের চেয়ে বড় তৈরি করতে পারেন।

— রিক কল্ডার

এটি আমি যা খুঁজছিলাম ধন্যবাদ.

— টেদেবাস

Answer 3

আপনি আপনার পিঠে পিছনে একটি বেঁধে বলছেন যে আপনি কম ফাইল ব্যবহার করবেন না। আমি 2.0 ব্যবহার করে আমার প্রথম টুইটার বুটস্ট্র্যাপ থিমটি তৈরি করেছিলাম এবং আমি CSS এ সমস্ত কিছু করেছি - একটি ওভাররাইড.css ফাইল তৈরি করে। জিনিসগুলি সঠিকভাবে কাজ করতে পেতে সময় লেগেছে।

এখন আমাদের 3.0। আমি আপনাকে নিশ্চিত করে তুলি যে কম শিখতে কম সময় লাগে, যা আপনি সিএসএসের সাথে স্বাচ্ছন্দ্য বোধ করেন তবে এই সমস্ত ক্রেজি সিএসএস ওভাররাইডের চেয়ে বেশি করুন। আপনি যা চান তার মত পরিবর্তন করা এক টুকরো পিঠা।

বুটস্ট্র্যাপ 3.0.০ এ কনটেইনার শ্রেণি প্রস্থকে নিয়ন্ত্রণ করে এবং এতে থাকা সমস্ত স্টাইলই ধারকটি পূরণ করার জন্য সামঞ্জস্য করে। ধারক প্রস্থের পরিবর্তনশীলগুলি ভেরিয়েবল.বিহীন ফাইলের নীচে রয়েছে are

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

কিছু সাইটগুলিতে হয় 1020 ডিসপ্লে পূরণ করার জন্য পর্যাপ্ত সামগ্রী নেই বা আপনি নান্দনিক কারণে সংকীর্ণ ফ্রেম চান। কারণ BS 12-কলামের গ্রিড ব্যবহার করে আমি 960 এর মতো একাধিক ব্যবহার করি।

Comments

কাজ করে, কিন্তু: ভেরিয়েবল নাম @container-sm, @container-mdএবং @container-lg(এখন)

— আন্দ্রিয়াস Dolk

@ বেস্টার্ডো সুন্দর নাম +1

— আন

Answer 4

@ এমসিবিজাম ইতিমধ্যে এই উত্তরটি দিয়েছে তবে এখানে আরও কিছুটা ব্যাখ্যা দেওয়া হয়েছে।

আপনি বিএস ডাউনলোড না করে সহজেই আপনার সিএসএস ফাইলে একটি মিডিয়া ক্যোয়ারী ব্যবহার করে পরিবর্তন করতে পারেন। আমি সবেমাত্র এটি করেছি এবং এটি সুন্দরভাবে কাজ করে।

মিডিয়া ক্যোয়ারের "ন্যূনতম প্রস্থ" মানটি সিএসএসকে কেবল আপনার ধারকটির প্রস্থকে 1000px থেকে 1200px এর চেয়ে বড় স্ক্রিনগুলিতে (বা আপনি যে প্রস্থটি এতে অন্তর্ভুক্ত করতে পছন্দ করেন) পরিবর্তন করতে বলবে । এটি আপনার সাইটের প্রতিক্রিয়াশীলতা সংরক্ষণ করে, সুতরাং যখন স্ক্রিনের আকারটি সেই মানের (ছোট মনিটর, ট্যাবলেট, স্মার্টফোন ইত্যাদি) এর নীচে লাফিয়ে যায়, তখনও আপনার সাইটটি ছোট পর্দার সাথে মানিয়ে নেবে।

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

Answer 5

বুটস্ট্র্যাপ 4 এর জন্য আপনি যদি এখানে সাস ব্যবহার করছেন তবে সম্পাদনা করার জন্য পরিবর্তনশীল

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

এই ভেরিয়েবলটিকে ওভাররাইড করার জন্য আমি বুটস্ট্র্যাপ আমদানির আগে আমার .sass ফাইলটিতে ডিফল্ট ছাড়াই $ ধারক-সর্বাধিক-প্রস্থের ঘোষণা করেছি।

দ্রষ্টব্য: আমার কেবলমাত্র xl মান পরিবর্তন করা দরকার তাই ব্রেকপয়েন্টগুলি নিয়ে ভাবার দরকার নেই।

Answer 6

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

কাজ করে তবে সেরা সমাধান হতে পারে না।

Answer 7

একটি মোড়ক নির্বাচনকারী ব্যবহার করুন এবং পুরো পৃষ্ঠাটি encapsulate করতে সেই র‌্যাপারটির ভিতরে 100% প্রস্থের একটি ধারক তৈরি করুন।

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

এখন সর্বাধিক প্রস্থটি 1000px এ সেট করা হয়েছে এবং আপনার কম বা স্যাসের দরকার নেই।

Answer 8

ধারক আকার

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

বিভাগে ধারক আকারে, এ পরিবর্তন 1140করুন970

আমি আশা করি এটি আপনাকে সাহায্য করবে

---

আপনার সঠিক জন্য আপনাকে ধন্যবাদ। বুটস্ট্রাপ কাস্টমাইজ করার জন্য লিঙ্ক: https://getbootstrap.com/docs/3.4/customize/

Answer 9

আপনার সিএসএস স্টাইলিংয়ে এই সিএসএসের টুকরো যুক্ত করুন। বুটস্ট্র্যাপ সিএসএস ফাইল যুক্ত হওয়ার পরে এটি যুক্ত করা আরও ভাল overw

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`