একটি ইনপুট ক্ষেত্রের পরিবর্তে বাম দিকে লেবেল

Question

আমি লেবেলগুলি ইনপুট ক্ষেত্রের উপরে নয়, তবে বাম দিকে রাখতে চাই।

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

এই কোডটি আমাকে দেয়:

আমি চাই:

Answer 1

আপনি প্রতিটি ফর্ম-গ্রুপের জন্য ফর্ম-ইনলাইন ক্লাস ব্যবহার করতে পারেন :)

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

Comments

ধন্যবাদ। লেবেলের পরে আমার একটি ডিভ ইনপুট-গ্রুপ ছিল যা নিজেকে প্রস্থে ডিফল্ট করে: 100%। 50% থেকে ডিভকে ওভাররাইড করা দরকার। তারপরে লেবেল এবং ইনপুট-গ্রুপ (ডেটপিকার) এক লাইনে ফিট হবে। (আমি আশা করি এটি ওভাররাইড ছাড়াই ক্লিনার হয়ে গিয়েছিল))

— টার্বো

না, আপনার এটিকে ওভাররাইড করার দরকার নেই। 'সারি' এবং 'কল- *' এর মতো গ্রিড বিকল্পগুলি ব্যবহার করে দেখুন।

— gvgramazio

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি দেখায় যে ফর্মের পিতামাত্ত শ্রেণীর পরিবর্তে পৃথক ফর্ম গোষ্ঠীগুলিকে ইনলাইন করার জন্য form-groupউত্তরাধিকারী হতে পারে form-inline।

— কাউবার্ট

নোট: আমার ক্ষেত্রে আমার দরকার ছিল থেকে ইনপুট করা মধ্যে DIV

— AlexNikonov

Answer 2

<label>বাইরে রাখুন form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

Comments

মজার, এটি কাজ করে তবে বুটস্ট্র্যাপের ডকুমেন্টেশন এটি দেখায় না। এটি ফর্ম গ্রুপে লেবেলটি দেখায়

— স্টিভেরেনো

Answer 3

"কাস্টম প্রস্থের প্রয়োজন" লেবেল বিভাগের CSS ডকুমেন্টেশন ট্যাবে বুটস্ট্র্যাপ 3 ডকুমেন্টেশন এ সম্পর্কে কথা বলেছে:

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

আপনি যদি "ব্র্যাড" স্টাইলটি দমন করতে বা কমাতে আপনার ব্রাউজার এবং ফায়ারব্যাগ বা ক্রোম সরঞ্জামগুলি ব্যবহার করেন তবে আপনার নিজের পছন্দ মতো জিনিসগুলি দেখতে পারা উচিত। স্পষ্টতই আপনি সমস্যাটি ঠিক করতে উপযুক্ত সিএসএস তৈরি করতে পারেন।

যাইহোক, আমি এটি বেআইনী মনে করি যে এটি করা আমার একেবারেই প্রয়োজন। আমি সাহায্য করতে পারিনি তবে অনুভব করতে পারি যে এই হেরফেরটি উভয় বিরক্তিকর এবং দীর্ঘমেয়াদে ত্রুটিযুক্ত one শেষ পর্যন্ত, আমি আমার সমস্ত ইনলাইন ইনপুট বিশ্বব্যাপী ঝাপটায় একটি ডামি ক্লাস এবং কিছু জেএস ব্যবহার করেছি। এটি মামলার সংখ্যা খুব কম ছিল, তাই খুব একটা উদ্বেগের বিষয় নয়।

তবুও, আমিও এমন একজনের কাছ থেকে শুনতে পছন্দ করব যার "ডান" সমাধান আছে, এবং আমার শিম / হ্যাক দূর করতে পারে।

আশা করি এটি বুটস্ট্র্যাপ 3 উদ্বেগ হিসাবে আপনার অনুরোধটিকে অগ্রাহ্যকারী এমন সমস্ত লোকের কাছে গসকেট ফুঁকবে না বলে আপনাকে সহায়তা করবে এবং আপনাকে প্রস্তাব দেবে।

Comments

কল সম্পর্কে কী বলা যায়, কল-এসএম -2 - এবং ইনপুটগুলি কল-এসএম -10 তৈরি করবেন?

— নিকিকো

Answer 4

আপনি এমন ফর্ম তৈরি করতে পারেন যেখানে লেবেল এবং ফর্ম নিয়ন্ত্রণ দুটি পদ্ধতি ব্যবহার করে পাশাপাশি রয়েছে -

1. ইনলাইন ফর্ম বিন্যাস

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

অনুভূমিক ফর্ম বিন্যাস

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

আপনি আরও তথ্য এবং লাইভ ডেমো জন্য এই পৃষ্ঠাটি দেখতে পারেন - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Comments

সমাধান 1 আমার পক্ষে কাজ করে না। ইনপুট নিয়ন্ত্রণের উপরে এখনও লেবেল। ক্যান্ডুর সমাধানটি আমি যা চাই তা করে তবে এটি কি সঠিক উপায়?

— কিট ফিস্টো

Answer 5

এটার মত

ডেমো

এইচটিএমএল

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

Comments

এটি বুটস্ট্র্যাপ v2.1.0 এর সমাধান, তবে বুটস্ট্র্যাপ v3.0.0 এর জন্য নয়

— স্টিফান ভোগ্ট

বুটস্ট্র্যাপ 3 তেও "ফর্ম-ইনলাইন" বিদ্যমান রয়েছে এবং আমি মনে করি এটিই মূল: +1

— আর্মনসন

Answer 6

আমারও একই সমস্যা ছিল, আমার সমাধানটি এখানে:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[e-mail]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

এখানে ডেমো

Answer 7

আপনাকে অবশ্যই সমস্ত উপাদানগুলি বামে ভাসিয়ে রাখতে হবে:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

কাঙ্ক্ষিত উপাদানগুলির জন্য কিছু মার্জিন দিন:

 .form-group { margin-right:5px }

এবং ক্ষেত্রগুলির উচ্চতা হিসাবে একই রেখার উচ্চতা লেবেলটি সেট করুন:

.form-group label { line-height:--px; }

Answer 8

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

আপনি এখানে কয়েকটি উত্তর থেকে দেখেন যে কিছু লোক এই দুটি ক্লাসকে এক আকারে ব্যবহার করছেন! অন্যরা মনে করেন যে তারা যখন ফর্ম-ইনলাইন চায় তখন তাদের ফর্ম-অনুভূমিক প্রয়োজন ।

বুটস্ট্র্যাপ ডকুমেন্টেশনে বর্ণিত ঠিক মতো এটি করার পরামর্শ দিচ্ছি:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

যা উত্পাদন করে:

Comments

আপনার কোডটি অনুলিপি করুন এবং আটকান, আমি বুটস্ট্র্যাপ ৩.৩.৪ সহ পাঠ্য ইনপুটটির উপরে নেম লেবেল পাই।

— মাইক কোভিংটন

Answer 9

আপনি লেবেলের অভ্যন্তরে একটি স্প্যান ট্যাগ ব্যবহার করতে পারেন

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Answer 10

আমি আমার সমস্যাটি সমাধান করতে পেরেছি। ঠিকঠাক কাজ করা বলে মনে হচ্ছে এবং এর অর্থ আমি নিজে থেকে আমার সমস্ত ইনপুটগুলিতে প্রস্থ যুক্ত করতে চাই না।

.form-inline .form-group input {
 width: auto; 
}

Comments

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

— gvgramazio

হ্যাঁ আমি সম্মত, আমি যখন পুরো বুটস্ট্র্যাপ দৃশ্যে নতুন ছিলাম তখন এটি লিখেছিলাম।

— টম সি

Answer 11

আমি নিশ্চিত যে আপনি ইতিমধ্যে আপনার উত্তরটি খুঁজে পেয়েছেন ... আমি এখানে পেয়েছি এমন সমাধান এখানে।

এটাই আমার সিএসএস।

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

এবং আমার এইচটিএমএল ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

আপনি এখানে কাজের উদাহরণ দেখতে পারেন ... http://jsfiddle.net/s6Ujm/

পিএস: আমিও একজন প্রবর্তক, প্রো ডিজাইনার ... নিখরচায় আপনার পর্যালোচনা ভাগ করুন।

Answer 12

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

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

ফিডল: http://jsfiddle.net/beewayne/B9jj2/29/

Comments

আপনার ভাটা 404'd

— মাইক কোভিংটন

Answer 13

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

এছাড়াও আমরা সহজ হিসাবে এটি ব্যবহার করতে পারেন

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Comments

শ্রেণি = "কন্ট্রোল-গ্রুপ" বুস্টারপ ভি 3 তে বিদ্যমান নেই

— স্টিফান ভোগ্ট

Answer 14

দেখে মনে হচ্ছে style="width:inherit;"ইনপুটগুলি কাজ করে ঠিকঠাক। jsfiddle ডেমো

Answer 15

কোনও সিএসএসের প্রয়োজন নেই। এটি আপনার পৃষ্ঠায় সূক্ষ্ম দেখতে হবে। আপনি col-md-*আপনার প্রয়োজন অনুযায়ী সেট করতে পারেন

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>