বুটস্ট্র্যাপ 3 এ ইনপুট প্রস্থ

Question

পুনরায় আপডেট করুন: আমি সত্যিই প্রশ্নটি না বুঝে লোকদের উত্তর যুক্ত করা থেকে বিরত রাখতে শীর্ষ উত্তর নির্বাচন করে এই প্রশ্নটি বন্ধ করছি। বাস্তবে গ্রিড ব্যবহার না করে বা অতিরিক্ত সিএসএস না যুক্ত করে কার্যকারিতা বাড়ানোর সাথে এটি করার কোনও উপায় নেই। গ্রিডগুলি কার্যকরভাবে কাজ করে না যদি আপনি এমন help-blockউপাদানগুলির সাথে আচরণ করছেন যা উদাহরণস্বরূপ একটি সংক্ষিপ্ত ইনপুট ছাড়িয়ে যেতে হবে তবে সেগুলি 'বিল্ড-ইন'। যদি এটি কোনও সমস্যা হয় তবে আমি অতিরিক্ত সিএসএস ক্লাস ব্যবহার করার পরামর্শ দিচ্ছি যা আপনি এখানে বিএস 3 আলোচনায় খুঁজে পেতে পারেন । এখন যে BS4 আউট হয়ে গেছে এটি পরিচালনা করার জন্য অন্তর্ভুক্ত আকারের আকারের শৈলীগুলি ব্যবহার করা সম্ভব যাতে এটি আরও দীর্ঘ সময়ের জন্য প্রাসঙ্গিক হতে পারে না। এই জনপ্রিয় এসও প্রশ্নে ভাল ইনপুট দেওয়ার জন্য সবাইকে ধন্যবাদ।

আপডেট: এই প্রশ্নটি উন্মুক্ত রয়ে গেছে কারণ গ্রিডের অবলম্বন না করে ইনপুট প্রস্থ পরিচালনা করতে বিএস -তে অন্তর্নির্মিত কার্যকারিতা সম্পর্কে (কখনও কখনও সেগুলি স্বাধীনভাবে পরিচালনা করতে হবে)। এটি পরিচালনা করতে আমি ইতিমধ্যে কাস্টম ক্লাস ব্যবহার করেছি যাতে এটি বেসিক সিএসএস-এ কোনও উপায় নয়। টাস্কটি বিএস বৈশিষ্ট্য আলোচনার তালিকায় রয়েছে এবং এখনও এটিকে সম্বোধন করা হয়নি।

আসল প্রশ্ন: বিএস 3 এ ইনপুট প্রস্থ পরিচালনা করার জন্য কোনও উপায় খুঁজে বের করে? সেই কার্যকারিতা যুক্ত করতে আমি বর্তমানে কিছু কাস্টম ক্লাস ব্যবহার করছি তবে আমি কিছু নথিভুক্ত বিকল্পগুলি মিস করেছি।

বর্তমান দস্তাবেজগুলি .col-lg-x ব্যবহার করতে বলেছে তবে এটি স্পষ্টভাবে কাজ করে না কারণ এটি কেবল ধারক ডিভের জন্যই প্রয়োগ করা যেতে পারে যা পরে সমস্ত ধরণের লেআউট / ভাসমান সমস্যা তৈরি করে।

এখানে একটি ঝাঁকুনি। আশ্চর্যের বিষয় হ'ল ফিডলটিতে আমি ফর্ম-গ্রুপকেও আকার বদলে দিতে পারি না।

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Comments

এই প্রস্থগুলি পরিচালনা করতে বুটস্ট্র্যাপ কেন ব্যবহার করবেন? এটি এতে বিশেষ ভাল বলে মনে হয় না এবং এটি জটিলতার পরিচয় দেয়।

— ইমন নের্বোন

এর জন্য বুটস্ট্র্যাপ কেন ব্যবহার করবেন, @ ইমন? আপনার বাকি উপাদানগুলির সাথে প্রতিক্রিয়াশীল নকশা এবং প্রান্তিককরণ যা বুটস্ট্র্যাপ পরিচালনা করছে তা মনে আসে। এবং যাইহোক, প্রশ্নের পুরো বিষয়টি হ'ল জটিলতার পরিচয় না দিয়ে কীভাবে এটি করা যায়।

— সিটিবি

@ctb: সরল সিএসএস এই ধরণের বিষয়গুলি ঠিক জরিমানা করে; বুটস্ট্র্যাপের অতিরিক্ত জটিলতার দরকার নেই।

— ইমন নের্বোন

সুতরাং অপেক্ষা করুন, এই প্রশ্নের উত্তর দেওয়া হয়েছিল? 38 টি উর্ধ্বতন অনেক।

— রোক

@ রুক - উত্তরটি হ'ল না, কোনও বিলড-ইন কার্যকারিতা নেই যদিও এটি তাদের আলোচনার তালিকায় রয়েছে। তবে বিকল্প হিসাবে বিএস আসলে এটি যোগ না করা অবধি এখানে কয়েকটি সরবরাহ করা হয়েছে।

— সাইবারওয়ম্ব্যাট

Answer 1

আপনি যা করতে চান তা অবশ্যই অর্জনযোগ্য।

আপনি যা চান তা হ'ল প্রতিটি 'গোষ্ঠী' কে এক সারিতে মোড়ানো, কেবল এক সারিতে পুরো ফর্মটি নয়। এখানে:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

আমি তৈরি নতুন জেএসফিডাল : নিউ জেএসফিডাল

মনে রাখবেন যে নতুন ফ্রিডલમાં, আমি 'কল-এক্সএস -5'ও যুক্ত করেছি যাতে আপনি এটি আরও ছোট স্ক্রিনেও দেখতে পারেন - সেগুলি সরিয়ে ফেললে কোনও পার্থক্য নেই। তবে আপনার মূল ক্লাসগুলি মনে রাখবেন, আপনি কেবল 'কল-এলজি -1' ব্যবহার করছেন। এর অর্থ যদি পর্দার প্রস্থটি 'lg' মিডিয়া ক্যোয়ারী আকারের চেয়ে ছোট হয়, তবে ডিফল্ট ব্লক আচরণ ব্যবহৃত হয়। মূলত কেবল 'কল-এলজি -১' প্রয়োগ করে আপনি যে যুক্তিটি নিযুক্ত করছেন তা হ'ল:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

দেখুন বুটস্ট্র্যাপ 3 গ্রিড সিস্টেম আরও তথ্যের জন্য। আমি আশা করি আমি পরিষ্কার ছিলাম অন্যথায় আমাকে জানান এবং আমি বিস্তারিত জানাতে পারি।

Comments

হ্যাঁ আমি @ স্কেলিকে আমার মন্তব্যে এটাই জানিয়েছি - এটি সম্পর্কে একটি মুক্ত বিষয় আছে এবং জিনিসগুলি নিষ্পত্তি হয়ে গেলে তারা এটিকে সমাধান করবে। অতিরিক্ত চিহ্নিত মার্কআপের কারণে যা আমি সন্ধান করছি তাতে সারি যুক্ত করা যা তারা যথাযথ ক্লাস তৈরি করে নিলে তা সম্পূর্ণ অপ্রয়োজনীয় - যা আমি করেছি। আমি শতাংশের প্রস্থের সাথে ইনপুট 1-12 তৈরি করেছি এবং আমি কেবল এটি ইনপুটটিতে প্রয়োগ করি - দুর্দান্ত কাজ করে

— সাইবারওয়ম্ব্যাট

আমি এই পোস্টটি সম্পর্কে খুব বেশি পড়িনি তবে ... "ফর্মের সাথে আনুভূমিক বিন্যাসে অনুভূমিক বিন্যাসে লেবেল এবং ফর্ম নিয়ন্ত্রণের গোষ্ঠীগুলি সারিবদ্ধ করতে বুটস্ট্র্যাপের পূর্বনির্ধারিত গ্রিড শ্রেণিগুলি ব্যবহার করুন so তাই পরিবর্তনগুলি করা হয়। আচরণের জন্য রূপ-গোষ্ঠীগুলি গ্রিড সারি হিসাবে, সুতরাং .row প্রয়োজন নেই। "

— dtc

@dtc এটি ইনপুট প্রস্থের জন্য খুব বেশি সাহায্য করে না?

— জ্যাকস

@ শাদউফ এবং যদি আমি কোনও ইনপুট এর লেবেল থেকে ছোট করতে চাই তবে কী হবে? আমাকে কি আর একটি ডিভসের জোড়া লাগাতে হবে ?

— পাওয়ারগেমার

ধন্যবাদ যে আমার জন্য কাজ করে। যাইহোক এটির রবিবার রাত 10 টা আমার জন্য :-) যেমন আমি বিশ্বের অন্যদিকে আছি।

— আনন্দ

Answer 2

বুটস্ট্র্যাপ 3 এ

আপনি কেবল একটি কাস্টম শৈলী তৈরি করতে পারেন:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

তারপরে এটির মতো নিয়ন্ত্রণগুলি তৈরি করতে এটি যুক্ত করুন:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

আপনার HTML এ লেআউটের জন্য আপনাকে অতিরিক্ত মার্কআপ রাখতে হবে না mark

Comments

এটি উত্তরে জিতেছে। এটি পরিষ্কার, পুনরায় ব্যবহারযোগ্য এবং ঠিক কাজ করে। আসলে এটি ডিফল্টরূপে বুটস্ট্র্যাপে রাখা উচিত কারণ এটি খুব সাধারণ বিরক্তি। খুব কমই আপনি খাঁটি ব্লক ফর্মগুলি চান।

— ববিভার 18

আমি এই সমাধানটি চেষ্টা করেছিলাম কিন্তু এটি আমার পক্ষে কার্যকর হয়নি। আমি আমার ক্ষেত্রের প্রস্থ সীমাবদ্ধ করতে চেয়েছিলাম তাই আমি কাস্টম স্টাইলে 'প্রস্থ: 200px' ব্যবহার করেছি, তবে এটির প্রস্থ পরিবর্তন হয়নি। আমি যখন 'সর্বোচ্চ-প্রস্থ: 200px' সেট করি তখনই আমি সঠিক ফলাফলটি পাই।

— paulo62

আমি যখন এটি ব্যবহার করি তখন ফর্ম-নিয়ন্ত্রণ শ্রেণীর অটো প্রস্থকে ওভাররাইড করা হবে না।

— জনি

এখানে মন্তব্যে একমত - এখানে দেখার আগে আমি এটি চেষ্টা করেছি, এটি ডিফল্টগুলিকে ওভাররাইট করার মতো মনে হচ্ছে না ... কিছু কাস্টম শৈলী কেন করে এবং কিছু না করে তা নিশ্চিত না।

— Wil

এটি দেখতে কেমন এমন একটি ফ্রিডল

— ব্র্যান্ডোনস

Answer 3

ASP.net MVC কন্টেন্ট- Site.css এ যান এবং এই লাইনটি সরান বা মন্তব্য করুন:

input,
select,
textarea {
    /*max-width: 280px;*/
}

Comments

আপনি যদি ঝাঁকুনির দিকে তাকান, আপনি দেখতে পাবেন যে ওপি ক্ষেত্রগুলিকে আরও ছোট নয়, ছোট করতে চায়। এখানে সবচেয়ে বড় সমস্যা হ'ল তার সাইটটি কোনওভাবেই সাইটসিএসকে রেফারেন্স দিচ্ছে না।

— Bmize729

আমি জানতাম না যে সিএসএসের নিয়মটি ছিল এবং এটি আমাকে পাগল করে তুলেছিল যে আমার নির্দিষ্ট প্রস্থগুলিকে উপেক্ষা করা হচ্ছে বলে মনে হচ্ছে। ধন্যবাদ.

— মাইকেল এস মিলার

Answer 4

আমি মনে করি আপনাকে ইনপুটগুলি একটি এর অভ্যন্তরে আবদ্ধ করতে হবে col-lg-4, এবং তারপরে form-groupএবং এর মধ্যে এটি সমস্ত একটিতে রইল form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

বুটপ্লি-তে ডেমো - http://bootply.com/78156

সম্পাদনা করুন: বুটস্ট্র্যাপ 3 ডক্স থেকে ..

ইনপুট, নির্বাচন এবং টেক্সারিয়াস বুটস্ট্র্যাপে ডিফল্টরূপে 100% প্রশস্ত। ইনলাইন ফর্মটি ব্যবহার করতে, আপনাকে এর মধ্যে ব্যবহৃত ফর্ম নিয়ন্ত্রণগুলির একটি প্রস্থ নির্ধারণ করতে হবে।

সুতরাং অন্য বিকল্পটি হ'ল সিএসএস ব্যবহার করে একটি নির্দিষ্ট প্রস্থ সেট করা:

.form-control {
    width:100px;
}

অথবা, col-sm-*'ফর্ম-গ্রুপ' এ প্রয়োগ করুন ।

Comments

আপনাকে ফর্ম-গ্রুপে সারি ক্লাস যুক্ত করতে হবে - আমি বুটস্ট্র্যাপ টিমের সাথে আলোচনা করেছি এবং তারা তাদের পরিকল্পনার তালিকায় ইনপুট নির্দিষ্ট প্রস্থ নিয়ন্ত্রণের সম্ভাবনা যুক্ত করেছে। ইতিমধ্যে আমাদের পূর্ণ গ্রিড ব্যবহার করতে হবে। আপনি যদি এগিয়ে যান এবং ফর্ম-গ্রুপ শ্রেণিতে সারি যুক্ত করেন এবং অনুভূমিক শ্রেণিটি সরিয়ে ফেলেন আমি এই উত্তরটি চিহ্নিত করব। এখানে ওয়ার্কিং ফিডল jsfiddle.net/tdUtX/2 এবং পরিকল্পনা github.com/twbs/bootstrap/issues/9397

— সাইবারওয়ম্ব্যাট

+ @ ইয়াশুয়া - +1 দুর্দান্ত উদাহরণ। এটি ইনপুট-গ্রুপ বর্গের সাথেও কাজ করে, যা আমাকে সমস্যা দিচ্ছিল।

— ডেভিড রবিনস

Answer 5

বর্তমান দস্তাবেজগুলি .col-xs-x ব্যবহার করতে বলে, কোনও এলজি নেই। তারপরে আমি মজার চেষ্টা করি এবং মনে হয় এটি কার্যকর হবে:

http://jsfiddle.net/tX3ae/225/

লেআউটটি রাখার জন্য আপনি যেখানে ক্লাসটি "সারি" রেখেছেন সেখানে পরিবর্তন করতে পারেন:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

Comments

ইনপুট-ফিল্ডটি খুব ছোট হয়ে যাওয়ার কারণে ছোট ডিভাইসগুলির জন্য কাজ করে না

— ফ্রান্সব্রান

Answer 6

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

ইনপুটগুলিকে সীমাবদ্ধ করতে form.group এ শ্রেণি যুক্ত করুন

Comments

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

— সাইবারওয়ম্ব্যাট

Answer 7

আপনি যদি ভিজ্যুয়াল স্টুডিও 15 এ মাস্টার.সাইট টেম্পলেট ব্যবহার করছেন, বেস প্রকল্পটিতে "Site.css" রয়েছে যা ফর্ম-নিয়ন্ত্রণ ক্ষেত্রগুলির প্রস্থকে ছাড়িয়ে যায়।

আমি প্রায় 300px প্রশস্তের চেয়ে আরও প্রশস্ততর পেতে আমার পাঠ্য বাক্সগুলির প্রস্থটি পাইনি। আমি সমস্ত কিছুই চেষ্টা করেছিলাম এবং কিছুই কার্যকর হয়নি। আমি দেখেছি যে সাইট। সিএসএসে একটি সেটিং রয়েছে যা সমস্যা তৈরি করছে।

এ থেকে মুক্তি পান এবং আপনি আপনার ক্ষেত্রের প্রস্থের উপর নিয়ন্ত্রণ পেতে পারেন।

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

Comments

ধন্যবাদ মানুষ, চার বছর পরে এটি আমাকে বাঁচিয়েছে

— ধনী

Answer 8

আমি জানি এটি একটি পুরানো থ্রেড, তবে আমি একই সমস্যাটি একটি ইনলাইন ফর্ম দিয়ে অভিজ্ঞতা পেয়েছি এবং উপরের বিকল্পগুলির মধ্যে কোনওটিই সমস্যার সমাধান করেনি। সুতরাং আমি আমার ইনলাইন ফর্মটি ঠিক তেমনভাবে ঠিক করেছি: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

এটাই ছিল আমার সমাধান। বিট হ্যাকি হ্যাক, তবে একটি ইনলাইন ফর্মের জন্য কাজটি করেছে।

Answer 9

আপনি শৈলীর বৈশিষ্ট্য যুক্ত করতে পারেন বা একটি সিএসএস ফাইলে ইনপুট ট্যাগের জন্য একটি সংজ্ঞা যুক্ত করতে পারেন।

বিকল্প 1: শৈলীর বৈশিষ্ট্য যুক্ত করা

<input type="text" class="form-control" id="ex1" style="width: 100px;">

বিকল্প 2: সিএসএসে সংজ্ঞা

input{
  width: 100px
}

আপনি অটোতে 100px পরিবর্তন করতে পারেন

আমি আশা করি আমি সাহায্য করতে পারে।

Answer 10

বুটস্ট্র্যাপ 3 এ

সমস্ত পাঠ্য <ইনপুট>, <টেক্সারিয়া> এবং <নির্বাচন> .ফর্ম-নিয়ন্ত্রণ সহ উপাদানগুলি প্রস্থে সেট করা হয়েছে: 100%; গতানুগতিক.

http://getbootstrap.com/css/#forms-example

দেখে মনে হচ্ছে, কিছু ক্ষেত্রে, ইনপুটগুলির জন্য আমাদের সর্বোচ্চ সর্বোচ্চ প্রস্থটি ম্যানুয়ালি সেট করতে হবে।

যাইহোক, আপনার উদাহরণ কাজ করে। এটি কেবল একটি বড় স্ক্রিন দিয়ে পরীক্ষা করুন, যাতে আপনি দেখতে পান যে নাম এবং ইমেল ক্ষেত্রগুলি এর সাথে 2/12 পেয়েছে (কল-এলজি -1 + কল-এলজি -1 এবং আপনার 12 টি কলাম রয়েছে)। তবে আপনার যদি একটি ছোট স্ক্রিন থাকে (কেবলমাত্র আপনার ব্রাউজারটির আকার পরিবর্তন করুন), ইনপুটগুলি সারিটির শেষ অবধি প্রসারিত হবে।

Answer 11

আপনি সহজ সিএসএস ছেড়ে দিতে হবে না :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Answer 12

আপনি যদি নিজের পছন্দমতো বুটস্ট্র্যাপের ইনপুট উপাদানগুলির প্রস্থকে কেবল হ্রাস বা প্রসারিত করতে চান তবে আমি সিএসএসে ব্যবহার করব max-width।

এখানে আমি তৈরি একটি খুব সহজ উদাহরণ:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

আমি পুরো ফর্মটির সর্বোচ্চ প্রস্থ 500px এ সেট করেছি। এইভাবে আপনাকে বুটস্ট্র্যাপের কোনও গ্রিড সিস্টেম ব্যবহার করার প্রয়োজন হবে না এবং এটি ফর্মটি প্রতিক্রিয়াশীল রাখবে।

Answer 13

আমিও একই সমস্যার সাথে লড়াই করেছি এবং এটিই আমার সমাধান।

এইচটিএমএল উত্স

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

অন্য ডিভ শ্রেণীর সাথে ইনপুট কোডটি কভার করুন

সিএসএস উত্স

.input_width{
   width: 450px;
}

কাভার্ড ডিভি ক্লাসে কোনও প্রস্থ বা মার্জিন সেটিং দিন।

বুটস্ট্র্যাপের ইনপুট প্রস্থটি সর্বদা 100% হিসাবে ডিফল্ট থাকে, সুতরাং প্রস্থটি সেই আচ্ছাদিত প্রস্থকে অনুসরণ করে।

এটি সর্বোত্তম উপায় নয়, তবে সবচেয়ে সহজ এবং একমাত্র সমাধান যা আমি সমস্যার সমাধান করেছি।

আশা করি এটি সাহায্য করেছে।

Answer 14

আমি জানি না যে কেন সবাই সামগ্রী সামগ্রী ফোল্ডারে সাইট.css ফাইলটিকে উপেক্ষা করছে। এই ফাইলের 22 লাইনে তাকান এবং আপনি ইনপুট নিয়ন্ত্রণ করার জন্য সেটিংস দেখতে পাবেন। এটি প্রদর্শিত হবে যে আপনার সাইট এই স্টাইল শীটটি উল্লেখ করছে না।

আমি এটি যুক্ত করেছি:

input, select, textarea { max-width: 280px;}

আপনার কৌতুক এবং এটি ঠিক কাজ করে।

আপনার কখনই বুটস্ট্র্যাপ সিএসএস বা বুটস্ট্র্যাপ.মিন সিএসএস আপডেট করা উচিত নয়। বুটস্ট্র্যাপ আপডেট হওয়ার সাথে সাথে এটি আপনাকে ব্যর্থ করে দেবে। এজন্য সাইট.css ফাইলটি অন্তর্ভুক্ত করা হয়েছে। আপনি যেখানে সন্ধান করছেন এমন প্রতিক্রিয়াশীল ডিজাইনটি আপনাকে সেই স্থানে পরিবর্তন করতে পারে।

এটির সাথে কাজ করে ফ্রিডল এখানে

Answer 15

style=""ইনপুট ক্ষেত্রে শর্তাদি যুক্ত করুন এবং সংজ্ঞা দিন, এটি এটি সম্পর্কে সহজতম উপায়: উদাহরণ:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 16

'ইনপুট ক্ষেত্রগুলি' এর বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে বুটস্ট্র্যাপ ক্লাস 'ফর্ম-ইনপুট' ব্যবহার করে। সহজভাবে, আপনার সিএসএস ফাইল বা প্রধান বিভাগে পছন্দসই প্রস্থ, সীমানা, পাঠ্য আকার ইত্যাদি সহ আপনার নিজের 'ফর্ম-ইনপুট' শ্রেণি যুক্ত করুন।

(বা অন্যথায়, সরাসরি শরীরের বিভাগে ইনপুট বৈশিষ্ট্যে আকার = '5' ইনলাইন কোড যুক্ত করুন))

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Answer 17

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

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>