টুইটার বুটস্ট্র্যাপে অনুভূমিকভাবে একটি ফর্মের ভিতরে ফর্ম ইনলাইন?


199

কোনও হোমমেড ক্লাস ছাড়াই টুইটার বুটস্ট্র্যাপে এমন দেখাচ্ছে এমন ফর্ম ডিজাইনের সর্বোত্তম উপায় (দয়া করে নীচের লিঙ্কটি দেখুন)?

নীচের উদাহরণের মতো কোনও ফর্ম-অনুভূমিকের অভ্যন্তরে কোনও অভ্যন্তরীণ ফর্ম-ইনলাইন সেট করা সম্ভব:

ইউআই গোলের স্ক্রিনশট

উত্তর:


316

বাসা বাঁধে না <form>ট্যাগগুলি, কাজ করবে না। কেবল বুটস্ট্র্যাপ ক্লাস ব্যবহার করুন।

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

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

আপনি সেই আচরণটি বিভিন্ন উপায়ে অর্জন করতে পারেন, এটি কেবল একটি উদাহরণ। এটি এই বুটপ্লাইয়ে পরীক্ষা করুন

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

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

নোট করুন যে আমি এ এর .form-inlineমধ্যে প্রোপার স্টাইলিংটি ব্যবহার করছি .controls
আপনি এই jsfiddle এ এটি পরীক্ষা করতে পারেন


3
আপনি ডিভগুলিতে ফর্ম ক্লাসগুলিও যুক্ত করতে পারেন, আমার ক্ষেত্রে আমি স্প্যান div ডিভের উপর উল্লম্ব ফর্ম শ্রেণি এবং স্প্যান 12 ডিভের উপর একটি অনুভূমিক ফর্ম শ্রেণি ব্যবহার করেছি
ইফতা

3
এটি বুটস্ট্র্যাপ 2 এর জন্য কাজ করে। বুটস্ট্র্যাপ 3 যান: stackoverflow.com/questions/18429121/...
Tomislav Muic

1
বুটস্ট্র্যাপ 3-এ, যদি ইনপুটটির নীচে কোনও ফাঁক থাকে তবে "ফর্ম-গ্রুপ" সরান। এটি প্রতিটি ডিভের নীচে একটি 15px ব্যবধান যুক্ত করে যা আপনি এটি ব্যবহার করেন।
অন্ধজনজেল

আপনার কী + মান উদাহরণে সারির সাথে ফর্ম-গোষ্ঠী মিশ্রিত করতে হবে না। @ র‌্যাপ -২-এইচ: আপনি উদাহরণ কোডটি পেস্ট করে অনুলিপি করতে পারেন এবং রান ক্লিক করতে পারেন।
সেবাস্তিয়ান

এটি কাজ করে তবে বুটস্ট্র্যাপ 3 এর বর্তমান সংস্করণে আমি এটি সরল করতে সক্ষম হয়েছি ... কেবল কোনও ডিভের মধ্যে কোনও ইনপুট নিয়ন্ত্রণ স্থাপন করা এই সমাধানের মূল বলে মনে হচ্ছে, অন্যথায় কোল-এক্সএক্স গ্রিড লেআউটটি কাজ করে না। ফর্ম-গ্রুপে বাসা বাঁধার প্রয়োজন ছিল না, প্যারেন্ট কল-এক্সএক্স- # একই ডিভি ভাগ করতে পারে এবং প্যারেন্ট ফর্মটি ইতিমধ্যে একটি ফর্ম-অনুভূমিক (100%) হওয়ায় "সারি" শ্রেণির কোনও প্রয়োজন নেই।
টনি ওয়াল

92

বুটস্ট্র্যাপ 3 এর জন্য উপরের উদাহরণটি কাজ করে তবে অতিরিক্ত ক্ষেত্রযুক্ত, বরং আপনি যে ক্ষেত্রগুলিতে ইনলাইন চান তার জন্য ফর্ম-গ্রুপ ব্যবহার ফর্ম-ইনলাইন ব্যবহার না করে over

উদাহরণ:

<div class="form-group">
     <label>CVV</label>
     <input type="text" size="4" class="form-control" />
</div>

<div class="form-inline">
      <label>Expiration (MM/YYYY)</label><br>
      <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>

ফর্ম-নিয়ন্ত্রণ শ্রেণীর কারণে এটি আপনার জন্য কাজ করতে পারে না যা "প্রদর্শন: ব্লক" সেট করে। আপনি যদি এটি "প্রদর্শন: ইনলাইন-ব্লক" এ ওভাররাইড করেন তবে এটি কাজ করা উচিত।
সিড্রিক গিলিমেট

1
এটি কাজ করছে না। প্রশ্ন যা বলবে তা করার চেষ্টা করুন, ফর্ম-ইনলাইন দিয়ে এটি সম্ভব নয়।
সেবাস্তিয়ান

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

3
আপনাকে অবশ্যই ফর্ম-ইনলাইন শ্রেণিতে সমস্ত ফর্ম-দলগুলি
আবদ্ধ করতে হবে

jsfiddle.net/9637fywb এটি বর্তমানের সর্বশেষতম বুটস্ট্র্যাপ সিডিএন (3.3.5) ব্যবহার করে - পছন্দসই হিসাবে কাজ করবে বলে মনে হয় না। এই উদাহরণটি "ইনলাইন" বিভাগের অভ্যন্তরে দুটি লেবেলের জন্য অ্যাকাউন্ট করে না। সম্ভবত ফিডলটি কোনও ধরণের একটি মোড়ক হারিয়েছে, তবে মনে হচ্ছে এটি উত্তরে অন্তর্ভুক্ত করা উচিত, যদি তাই হয়।
এমরগিনস

14

ইনপুটগুলির উপরে বসতে লেবেল পেতে এটিতে একটি সিএসএস বর্গ সহ টুইটার বুটস্ট্র্যাপ 3.x ব্যবহার করে। এখানে একটি ফিডাল লিঙ্ক , ফল দেখতে প্যানেলটি যথেষ্ট পরিমাণ প্রশস্ত করতে নিশ্চিত করুন।

এইচটিএমএল:

  <div class="row myform">
     <div class="col-md-12">
        <form name="myform" role="form" novalidate>
           <div class="form-group">
              <label class="control-label" for="fullName">Address Line</label>
              <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
           </div>

           <div class="form-inline">
              <div class="form-group">
                 <label>State</label>
                 <input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
              </div>

              <div class="form-group">
                 <label>ZIP</label>
                 <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
              </div>
           </div>

           <div class="form-group">
              <label class="control-label" for="country">Country</label>
              <input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
           </div>
        </form>
     </div>
  </div>

সিএসএস:

.myform input.form-control {
   display: block;  /* allows labels to sit on input when inline */
   margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}

2

যেহেতু বুটস্ট্র্যাপ 4 ডি ক্লাস = "ফর্ম-গ্রুপ কোল-এক্স" এর সাথে মিলিয়ে ডিভ ক্লাস = "ফর্ম-সারি" ব্যবহার করে। এক্স আপনার প্রস্থের প্রয়োজন। আপনি সুন্দর ইনলাইন কলাম পাবেন। ঝাঁকুনি দেখুন ।

<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2" for="naam">Naam:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
            <div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
        </div>
    </div>

    <div class="form-row">

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="telefoon">Telefoon:&nbsp;*</label>
            <div class="col-sm-12">
                <input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
                <div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
            </div>
        </div>

        <div class="form-group col-5">
            <label class="control-label col-sm-4" for="email">E-mail: </label>
            <div class="col-sm-12">
                <input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
                <div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
                    </div>
                </div>

        </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="titel">Titel:&nbsp;*</label>
        <div class="col-sm-10">
            <input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
            <div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
        </div>
    </div>
<from>

1

আমি জানি এটি একটি পুরানো উত্তর তবে এখানে আমি সাধারণত যা করি:

সিএসএস:

.form-control-inline {
   width: auto;
   float:left;
   margin-right: 5px;
}

তারপরে আপনি যে ক্ষেত্রগুলিকে একটি ডিভের সাথে অন্তর্ভুক্ত করতে চান তা মোড়ানো এবং ইনপুটটিতে।-নিয়ন্ত্রণ-ইনলাইন যুক্ত করুন, উদাহরণস্বরূপ:

এইচটিএমএল

<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>

1

এটিকে সহজ করার জন্য, class="form-inline"ইনপুটটির আগে একটি যুক্ত করুন।

উদাহরণ:

<div class="col-md-4 form-inline"> //add the class here...
     <label>Lot Size:</label>
     <input type="text" value="" name="" class="form-control" >
 </div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.