বোতামটি পুরো প্রস্থে চলেছে?

Question

আমি কলামটির পুরো প্রস্থ নিতে একটি বোতাম চাই, তবে সমস্যা হচ্ছে ...

<div class="span9 btn-block">
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
</div>

আমি কীভাবে কলামটির মতো বোতামটি তৈরি করব?

Comments

কি কলাম? সিএসএস কোথায়?

— জেজেজে

সুতরাং আমি টুইটার-বুটস্ট্র্যাপ

— ব্যবহারকারীর 1438003

আপনি চেষ্টা করেছেন style="width:100%"? বা এটি আপনার ক্লাসের একটিতে রাখছেন?

— লি টেলর

এটি হতে পারে কারণ এর কিছু মার্জিন রয়েছে বা কলামে কিছু প্যাডিং রয়েছে।

— ওহাদ

btn-blockবর্গ আমার জন্য কাজ করে BS3 হিসেবে আশা

— fguillen

Answer 1

বুটস্ট্র্যাপ ভি 3 এবং ভি 4

btn-blockআপনার বোতাম / উপাদান এ ক্লাস ব্যবহার করুন

বুটস্ট্র্যাপ ভি 2

input-block-levelআপনার বোতাম / উপাদান এ ক্লাস ব্যবহার করুন

Comments

বোতাম গোষ্ঠীগুলির জন্য আপনাকে পাশাপাশি র‍্যাপারে যুক্ত btn-blockকরতে হবে btn-group।

— জেসি

বুটস্ট্র্যাপ ভি 3 এর সাথে পরীক্ষিত এবং "বিটিএন-ব্লক" আমার পক্ষে কাজ করেছে

— বুধিকা আলুইস

আমি একই ব্যবহার করছি তবে <ডি ক্লাস = "বিটিএন-গ্রুপ"> <বোতাম আইডি = "বিটিএনসন্ধান" শ্রেণি = "বিটিএন-ব্লক"> অনুসন্ধান </ বাটন> </div>

— সামরা

চিয়ারস সাথী! এটি অবশ্যই উত্তর হতে হবে

— নিকোলাস

Answer 2

বুটস্ট্র্যাপের পূর্বনির্ধারিত শ্রেণিটি কেন input-block-levelকাজ করে না?

<a href="#" class="btn input-block-level">Full-Width Button</a> <!-- BS2 -->
<a href="#" class="btn form-control">Full-Width Button</a> <!-- BS3 -->

<!-- And let's join both for BS# :) -->
<a href="#" class="btn input-block-level form-control">Full-Width Button</a>

কন্ট্রোল সাইজিং ^ বিভাগে এখানে আরও জানুন ।

Comments

@fguillen আর BS ব্যবহার করছে না তবে form-controlক্লাস চেষ্টা করে দেখুন । এটি নমুনায় 100% প্রশস্ত করে তোলে to

— CodeAngry

@ কোডএডগ্রি কেবল কৌতূহল, আপনি কীভাবে আর বিএস ব্যবহার করছেন না (সম্ভাব্য কোড ক্রোধ ছাড়াও)?

— কে কিলিয়ান লিন্ডবার্গ

@ কার্ললাইন্ডবার্গ আমি আমার নিজস্ব ঘূর্ণিত! দ্রুত পাল্টানোর জন্য বিএস ভাল তবে ... এটি দাঁড়ায় না।

— CodeAngry

@ কোডএগ্রি, এটি আপনার নিজের কাঠামোটি ঘুরিয়ে দেওয়া দুর্দান্ত - তবে থিম-রোলারটি ব্যবহার করা আপনার পক্ষে উপযুক্ত হবে - যেভাবেই হোক না কেন, নিজের জিনিসপত্রের প্রপস!

— কোডি

বিএস 4 অনুসারে, @ লাইকের উত্তরটি অনেক বেশি আপ টু ডেট বলে মনে হচ্ছে এবং বিএস 2, 3 এবং 4 এর অন্তর্ভুক্ত above এটির সাথে চ্যাটি হওয়ার জন্য ক্ষমা প্রার্থনা করুন, তবে গৃহীত উত্তরটি ভাল ধারণা বলে মনে হচ্ছে না এবং এটি উত্তর হ্রাসপ্রাপ্ত বলে মনে হচ্ছে।

— জেএল পেয়ারেট

Answer 3

আমি কেবল এটি ব্যবহার করেছি:

<div class="col-md-4 col-sm-4 col-xs-4">
<button type="button" class="btn btn-primary btn-block">Sign In</button>
</div>

Comments

বিটিএন-এলজি দিয়ে এটি করার উপায়। ফর্ম-নিয়ন্ত্রণ কাজ করে না।

— সর্দারস্ট্রোম

Answer 4

বুটস্ট্র্যাপ 4.1+ +

ব্যবহারের col-12, btn-block, w-100বাform-control

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

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success col-12">
             class="col-12"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-primary w-100">
             class="w-100"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-secondary btn-block">
             class="btn-block"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-success form-control">
             class="form-control"
         </button>
     </div>
</div>

<br>

<div class="row no-gutters">
     <div class="col">
         <button class="btn btn-danger" style="width:100%">
             style="width:100%"
         </button>
     </div>
</div>

Answer 5

ব্যবহার

<div class="btn-group btn-group-justified">
  ...
</div>

তবে এটি কেবল <a> উপাদানগুলির জন্য কাজ করে <বোতাম> উপাদান নয়।

দেখুন: http://getbootstrap.com/compferences/#btn-groups-jusified

Comments

প্রশ্নটি বোতামগুলির নয় btn-group, btn-blockলেইকের দ্বারা শ্রেণীর বিষয়ে উল্লেখ করা আরও গ্রহণযোগ্য প্রতিক্রিয়া রয়েছে।

— হ্যান্স

Answer 6

আপনার এই স্টাইলগুলি সিএসএস শীটে যুক্ত করা উচিত

div .no-padding {
  padding:0;
}

button .full-width{
  width:100%;
  //display:block; //only if you're having issues
}

তারপরে আপনার কোডে ক্লাস যুক্ত করুন পরিবর্তন করুন

<div class="span9 btn-block no-padding">
    <button class="btn btn-large btn-block btn-primary full-width" type="button">Block level button</button>
</div>

আমি এটি পরীক্ষা করিনি এবং আপনি যা চান তা আমি 100% নিশ্চিত নই, তবে আমি মনে করি এটি আপনাকে ঘনিষ্ঠ করবে।

Comments

আমি আমার কোডে একটি টাইপো সংশোধন করেছি, শীর্ষ সিএসএস এন্ট্রিতে স্প্যানের পরিবর্তে ডিভ হওয়া উচিত ছিল। শৈলী প্রয়োগ করা হচ্ছে তা আপনি নিশ্চিত করতে পারেন? বোতামের প্রস্থ কি আদৌ বদলে যায়?

— কেনে বানিয়া

btn-blockসেই গুণই আমাকে রক্ষা করল! আমার চুলগুলি টেনে

— আনছিল

Answer 7

আমি ভাবতাম এটিই হবে কাজগুলির সবচেয়ে বুটস্ট্র্যাপ-এস্কু পদ্ধতি:

<button type='button' class='btn btn-success col-xs-12'> First buttton baby </button>

আমি যা করছি তা ক্লাস col-xs-12বোতামে যুক্ত করা হচ্ছে।

Answer 8

<div class="col-md-9">
    <button class="btn btn-block btn-primary" type="button">Block level button</button>
</div>

বুটস্ট্র্যাপ 3 এ, আপনার যা প্রয়োজন তা হ'ল। আমি বিশ্বাস করি btn-largeএর প্রস্থটি ওভাররাইড করছিল btn-block।

Answer 9

বোতামের প্রস্থটি বোতামের পাঠ্য দ্বারা সংজ্ঞায়িত করা হয়। সুতরাং আপনি যদি বোতামটির প্রস্থ নির্ধারণ করতে চান তবে আপনি সিএসএসে পিক্সেল ব্যবহার করে একটি সংজ্ঞায়িত প্রস্থ ব্যবহার করতে পারেন বা যদি প্রতিক্রিয়াশীল করতে চান তবে শতাংশের মান ব্যবহার করতে পারেন।