বুটস্ট্র্যাপের সাথে স্থির প্রস্থের বোতামগুলি

Question

বুটস্ট্র্যাপ স্থির প্রস্থ বোতাম সমর্থন করে? বর্তমানে যদি আমার কাছে 2 টি বোতাম, "সংরক্ষণ করুন" এবং "ডাউনলোড" থাকে তবে সামগ্রীর উপর ভিত্তি করে বোতামের আকার পরিবর্তন হয়।

এছাড়াও বুটস্ট্র্যাপ প্রসারিত করার সঠিক উপায় কী?

Comments

স্থির প্রস্থের দ্বারা আপনি কী বোঝাতে চেয়েছেন যে এটি এর ভিতরে থাকা সামগ্রী দিয়ে বৃদ্ধি পায় না? বোতামগুলির মধ্যে কেবলমাত্র পাঠ্য দ্বারা সীমাবদ্ধ।

— আন্দ্রেস ইলিচ

@ অ্যান্ড্রেস ইলিচ বর্তমানে যদি আমার 2 টি বোতাম "সংরক্ষণ করুন" এবং "ডাউনলোড" বোতামের আকারের উপর ভিত্তি করে

— লিখিত

সুতরাং আপনি কি একই প্রস্থের সাথে দুটি বোতামটি সঠিক করতে চান?

— আন্দ্রেস ইলিচ

stackoverflow.com/questions/10459808/...

— trante

Answer 1

আপনি .btn-blockবোতামের ক্লাসটিও ব্যবহার করতে পারেন, যাতে এটি পিতামাতার প্রস্থে প্রসারিত হয়।

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

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

Answer 2

এটি করার জন্য আপনি উভয় বোতামের জন্য ঠিক মনে করেন এমন প্রস্থটি নিয়ে আসতে পারেন এবং প্রস্থের সাথে একটি কাস্টম ক্লাস তৈরি করুন এবং এটি আপনার বোতামগুলিতে যুক্ত করুন:

সিএসএস

.custom {
    width: 78px !important;
}

আমি তখন এই ক্লাসটি ব্যবহার করতে এবং এটির মতো বোতামগুলিতে যুক্ত করতে পারি:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

ডেমো: http://jsfiddle.net/yNsxU/

আপনি যে কাস্টম ক্লাসটি তৈরি করেছেন তা আপনার নিজের স্টাইলশীটের ভিতরে রাখতে পারেন এবং বুটস্ট্র্যাপ স্টাইলশিটের পরে লোড করুন। আমরা এটি করি কারণ আপনি ফ্রেমওয়ার্কটি আপডেট করার সময় বুটস্ট্র্যাপ স্টাইলশীটের অভ্যন্তরে যে কোনও পরিবর্তন ঘটনাক্রমে হারিয়ে যেতে পারে, আমরা আপনার পরিবর্তনগুলি ডিফল্ট মানগুলির চেয়েও অগ্রাধিকার পেতে চাই।

Comments

emপিক্সেলের পরিবর্তে ইউনিটগুলি ব্যবহার করুন , তারা আপনাকে অক্ষরের দৈর্ঘ্য অনুসারে প্রস্থ নির্ধারণ করতে সহায়তা করে

— svarog

@ ড্যানডাসক্লেস্কু ~ 2 বছর পরে আমি একমত নই। লেখক পুরো পিতামাতাকে পূরণ করার জন্য বোতামগুলি প্রসারিত করার পরে নাও হতে পারে, একটি বোতামের জন্য 'সংরক্ষণ করুন' বলে অর্ধেক পৃষ্ঠা হতে পারে। আমি এই জাতীয় কিছু সুপারিশ করব তবে প্রয়োজন হলে মিডিয়া প্রশ্নগুলির সাথে। এটিকে সর্বদা বৃহত্তম বোতাম হিসাবে বৃহত্তর করার জন্য জাভাস্ক্রিপ্ট রয়েছে, এটি সাধারণত আমি দূরে থাকি এমন একটি পথ

— জ্যাকব ম্যাককে

Answer 3

যদি আপনি "বিটিএন-গ্রুপ" শ্রেণীর সাথে একটি ডিভের ভিতরে আপনার বোতামগুলি রাখেন তবে ভিতরে বোতামগুলি বৃহত্তর বোতামের মতো একই আকারে প্রসারিত হবে।

উদাহরণ:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

বুটস্ট্র্যাপ বোতাম গ্রুপগুলি

Comments

@ টানজো: কেন এটি কাজ করে না আপনি তার প্রসারিত করতে পারেন? আমি দেখতে পেয়েছি যে বাস্তবে এটি হয় - উদাহরণ হিসাবে উল্লম্ব প্রকরণটি দেখুন ।

— ড্যান ড্যাসক্লেস্কু

আমি একই কার্যকারিতা অর্জন করার চেষ্টা করছি এবং উপরের কোডটি আমার পক্ষেও কার্যকর হয় না। @ ড্যানডাসক্লেস্কু আপনি কি অন্য কোন উপায় খুঁজে পেয়েছেন?

— জেলাতিনফক্স

এটি কাজ করতে বাটনগুলি ক্লাস বিটিএন-ব্লক হতে হবে, কমপক্ষে আমার জন্য।

— গ্যাব্রিয়েল

না এটি কার্যকর হয় না - বোতামগুলি একই আকারের নয়।

— আন্তোনিওসেস

আমি একটি অতিরিক্ত মার্জিন-বাম যুক্ত করেছি কারণ আমি চেয়েছিলাম বোতামগুলি পৃথক করা হোক। নিখুঁতভাবে কাজ করেছেন। সমস্ত একই প্রস্থ।

— টমাস গঞ্জালেজ

Answer 4

আপনার বোতামগুলির জন্য, আপনি নির্দিষ্ট ন্যূনতম প্রস্থ এবং সর্বাধিক প্রস্থ সহ সেই বিশেষ ক্লাসের বোতামগুলির জন্য আর একটি সিএসএস নির্বাচনকারী তৈরি করতে পারেন। সুতরাং যদি আপনার বোতাম হয়

<button class="save_button">Save</button>

আপনার বুটস্ট্র্যাপ সিএসএস ফাইলে আপনি এমন কিছু তৈরি করতে পারেন

.save_button {
    min-width: 80px;
    max-width: 80px;
}

আপনার প্রতিক্রিয়াশীল ডিজাইন থাকলেও এটি সর্বদা 80px থাকা উচিত।

বুটস্ট্র্যাপ প্রসারিত করার সঠিক পথটি যতটা যায় ততক্ষণ এই থ্রেডটি একবার দেখুন:

বুটস্ট্র্যাপ প্রসারিত হচ্ছে

Answer 5

বিএস 4 এর সাহায্যে আপনি সাইজিংটি ব্যবহার করতে পারেন এবং ডাব্লু -100 প্রয়োগ করতে পারেন যাতে বোতামটি প্যারেন্ট পাত্রে সম্পূর্ণ প্রস্থকে দখল করতে পারে।

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

Answer 6

@ ক্রাভিটস ৮৮ উত্তরটি প্রসারণ করা হচ্ছে:

এটি পুরো প্রস্থে ফিট করার জন্য বোতামগুলি প্রসারিত করবে:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

Comments

এটি বুটস্ট্র্যাপ ৩.৩-এর সঠিক উত্তর। btn-group-justifiedমূল বর্গ হয়। ডকুমেন্টেশন এখানে দেখুন: getbootstrap.com/docs/3.3/components/…

— CXJ

Answer 7

বিটিএন-গ্রুপ-ন্যায়সঙ্গত এবং বিটিএন-গ্রুপ কেবল স্থিতিশীল সামগ্রীর জন্য কাজ করে তবে গতিশীলভাবে তৈরি বোতামগুলিতে নয়, এবং সিএসএস-এ বোতামের সাথে স্থির করা কার্যকর নয় কারণ এটি একই প্রস্থে থাকা এমনকি সমস্ত সামগ্রী সংক্ষিপ্তও রয়েছে।

আমার সমাধান: একই ক্লাসটিকে বোতামের গোষ্ঠীতে রেখে তারপরে সকলের লুপ করুন, দীর্ঘতম বোতামটির প্রস্থ পান এবং এটি সকলকে প্রয়োগ করুন

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

Answer 8

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

1) এটি কোনও হ্যাক নয় (ন্যূনতম প্রস্থ এবং সর্বোচ্চ-প্রস্থ একইরূপে হ্যাকি হ'ল)

2) গুরুত্বপূর্ণ ট্যাগটি ব্যবহার করে না যা খারাপ অভ্যাস

3) প্রস্থটি ব্যবহার করে তাই খুব পঠনযোগ্য হবে এবং যে কেউ সিএসএসে ক্যাসকেডিং কীভাবে কাজ করে তা বুঝতে পারে যে কী চলছে (সম্ভবত এটির জন্য কোনও সিএসএস মন্তব্য রেখে দিন?)

৪) আপনার নির্বাচকদের একত্রিত করুন যা বর্ধিত নির্ভুলতার জন্য আপনার লক্ষ্যযুক্ত নোডের জন্য প্রযোজ্য

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

Answer 9

ঠিক একই প্রয়োজনে এসেছিল এবং নির্দিষ্ট প্রস্থ নির্ধারণের সাথে এটি পরিপূর্ণ করা হয়নি।

এটি jquery দিয়ে করেছেন:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

Answer 10

আপনার সমস্যার সমাধানের সর্বোত্তম উপায় হ'ল কাঙ্ক্ষিত কলামের প্রস্থ সহ বোতাম ব্লক বিটিএন-ব্লক ব্যবহার করা ।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

Answer 11

এখানে আমি একটি বোতাম-গ্রুপ উপাদানগুলিতে বোতামগুলির সাথে তুলনা করে একটি সমাধান পেয়েছি। সহজ সমাধানটি হ'ল বৃহত্তম প্রস্থের সাথে একটি পান এবং অন্য বোতামে প্রস্থটি সেট করুন। সুতরাং তাদের সমান প্রস্থ থাকতে পারে।

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

এটি একটি মোহন মত কাজ করে।

Answer 12

এটি একটি নির্বোধ সমাধান হতে পারে তবে আমি এই সমস্যার সমাধান খুঁজছিলাম এবং অলস হয়ে গিয়েছিলাম।

যাইহোক, ইনপুট শ্রেণি ব্যবহার করে = "বিটিএন ..." ... বোতামের পরিবর্তে এবং মান = গুণাবলীর সাথে ফাঁক দিয়ে স্পেস দিয়ে যাতে সেগুলি একই প্রস্থে বেশ ভাল কাজ করে।

যেমন:

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

আমি এত দিন বুটস্ট্র্যাপ ব্যবহার করিনি, এবং সম্ভবত এই পদ্ধতিকে ব্যবহার না করার কোনও ভাল কারণ আছে তবে আমি ভেবেছিলাম আমিও ভাগ করে নিতে পারি

Comments

আপনি ব্যবহার করেন তাহলে <button>তারপর ট্যাগ ব্যবহার করতে প্রয়োজন  , উদাহরণস্বরূপ: <button type="button" class="btn btn-default">&nbsp;Edit&nbsp;</button>।

— এন্ডি তেজহোনো

এটা আমার ক্ষেত্রে <a class="btn btn-default btn-sm" href="read.php?id='.$row['id'].'"> সম্পাদনা </a> কাজ করবে না

— মীনা গ্যাব্রিয়েল