বুটস্ট্র্যাপ 2 দিয়ে একটি ডিভকে কীভাবে কেন্দ্র করবেন?

Question 1

http://twitter.github.com/bootstrap/scaffolding.html

আমি সমস্ত সংমিশ্রণের মতো চেষ্টা করেছি:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

বা

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

স্প্যান এবং অফসেট নম্বর পরিবর্তিত হয়েছে ...

তবে আমি কোনও পৃষ্ঠায় পুরোপুরি কেন্দ্রে একটি সাধারণ বাক্স পেতে পারি না :(

আমি কেবলমাত্র একটি 6-কলাম-প্রশস্ত বক্স কেন্দ্রিক চাই ...

সম্পাদনা করুন:

এটা দিয়ে

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

কিন্তু বাক্সটি অনেক প্রশস্ত, স্প্যান with দিয়ে আমি এটি করার কোনও উপায় আছে কি?

span7 offset2বাম দিকে span7 offset3অতিরিক্ত প্যাডিং ডানদিকে দেয় ...

Question 2

, আকার আপনি চান DIV আছে নিজেই মাপে তাই মত বিঘত আকার কমিয়ে ব্যতীত ... class="span6 offset3", class="span4 offset4", ইত্যাদি ... হিসাবে সহজ কিছু style="text-align: center"DIV নেভিগেশন প্রভাব আপনি যা খুঁজছেন হতে পারে

আপনি কোনও সেট অফসেট সহ স্প্যান 7 ব্যবহার করতে পারবেন না এবং পৃষ্ঠায় স্প্যানটি কেন্দ্রীভূত করতে পারবেন (কারণ মোট স্প্যান = 12)

Question 3

বুটস্ট্র্যাপের স্প্যানগুলি বাম দিকে ভাসমান। তাদের কেন্দ্রীভূত করতে যা লাগে তা হ'ল এই আচরণটি ওভাররাইড করে। আমি আমার স্টাইলশীটে এটি যুক্ত করে এটি করি:

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

আপনার যদি এই শ্রেণিটি সংজ্ঞায়িত করা থাকে তবে কেবল এটি স্প্যানে যুক্ত করুন এবং আপনি ভাল।

<div class="span7 center"> box </div>

নোট করুন যে এই কাস্টম সেন্টার ক্লাসটি বুটস্ট্র্যাপ সিএসএসের পরে সংজ্ঞায়িত করা উচিত । আপনি ব্যবহার করতে পারেন !importantতবে এটি প্রস্তাবিত নয়।

Question 4

বুটস্ট্রা ৩-এর .center-blockক্লাস রয়েছে যা আপনি ব্যবহার করতে পারেন। এটি হিসাবে সংজ্ঞায়িত করা হয়

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

ডকুমেন্টেশন এখানে ।

Question 5

আপনি যদি পূর্ণ-বুটস্ট্র্যাপ যেতে চান (এবং স্বতঃ বাম / ডান পথে নয়) আপনার একটি প্যাটার্ন দরকার যা 12 টি কলামের মধ্যে উপযুক্ত হবে যেমন 2 ফাঁকা, 8 সামগ্রী, 2 ফাঁকা। এই সেটআপটি এটাই করবে। এটি কেবল- এমডি- রূপগুলি কভার করে , আমি কোল-এক্সএস -12 যোগ করে এটি ছোট আকারের জন্য স্ন্যাপ করি tend

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Question 6

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

<div class="login-container">
  <!-- Your Login Form -->
</div>

এবং শৈলী:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

যদি আপনি কোনও বুটস্ট্র্যাপ .containerডিভের মধ্যে কোথাও বাসা বেঁধে থাকেন তবে এটি ঠিক কাজ করবে ।

Question 7

ক্লাস কেন্দ্রের বিষয়বস্তু যুক্ত করুন

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Question 8

@ জুহাইবআলি কোড কোড আমার জন্য কাজ করে তবে আমি এটিকে কিছুটা পরিবর্তন করেছি:

আমি সিএসএসে একটি নতুন ক্লাস তৈরি করেছি

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

তারপর ডিভ হয়ে যায়

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

আমি নিজেই ডিভের প্রস্থের জন্য কল-এমডি -6 যুক্ত করেছি যা এই পরিস্থিতিতে ডিভটি অর্ধেক আকারের বলে বোঝায়, বুটস্ট্র্যাপে 1 -12 কোল এমডি রয়েছে।

Question 9

এই নির্দেশিকাটি অনুসরণ করুন https://getbootstrap.com/docs/3.3/css/

ব্যবহার .center-block

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

Question 10

বর্গ সঙ্গে একটি পিতা বা মাতা DIV আছে মধ্যে div মোড়ানো rowতারপর শৈলী যোগ margin:0 auto;DIV আছে করতে

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>