বুটস্ট্র্যাপ: বোতামের সাহায্যে ইনপুট সারিবদ্ধ করুন

Question

বোতাম এবং ইনপুটগুলি বুটস্ট্র্যাপে ভালভাবে সারিবদ্ধ হয় না কেন?

আমি সাধারণ কিছু চেষ্টা করেছিলাম:

<input type="text"/><button class="btn">button</button>

বোতামটি 5pxক্রোম / ফায়ারফক্সের ইনপুট থেকে প্রায় কম।

Answer 1

টুইটার বুটস্ট্র্যাপ 4

টুইটার বুটস্ট্র্যাপ ৪-এ, ইনপুট এবং বোতামগুলি input-group-prependএবং input-group-appendক্লাসগুলি ব্যবহার করে সারিবদ্ধ করা যায় ( https://getbootstrap.com/docs/4.0/compferences/input-group/#button-addons দেখুন )

বাম দিকে গ্রুপ বোতাম (প্রিপেন্ড)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

ডানদিকে গ্রুপ বোতাম (সংযোজন)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

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

@ অ্যাবাইম্লেক্সের উত্তরে দেখানো হয়েছে, .input-groupক্লাসগুলি ব্যবহার করে ইনপুট এবং বোতামগুলি সারিবদ্ধ করা যায় (দেখুন http://getbootstrap.com/compferences/#input-groups-buttons )

বাম দিকে গ্রুপ বোতাম

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

ডানদিকে গ্রুপ বোতাম

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

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

---

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

বুটস্ট্র্যাপ একটি .input-appendশ্রেণীর প্রস্তাব দেয় যা একটি মোড়কের উপাদান হিসাবে কাজ করে এবং এটি আপনার জন্য সংশোধন করে:

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

তাঁর উত্তরে @ ওলেকসিয়ি খিল্কেভিচ দ্বারা চিহ্নিত হিসাবে, সারিবদ্ধ করার inputএবং শ্রেণিটি buttonব্যবহার করে দ্বিতীয় উপায় রয়েছে .form-horizontal:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

পার্থক্য

এই দুটি শ্রেণীর মধ্যে পার্থক্য যে .input-appendস্থাপন করবে buttonবিরুদ্ধে input(তাই তারা চেহারা তারা সংযুক্ত হয়) উপাদান, যেখানে .form-horizontalতাদের মধ্যে একটি স্থান স্থাপন করবে।

-- বিঃদ্রঃ --

ব্যবস্থাগুলি ছাড়াই inputএবং buttonউপাদানগুলিকে একে অপরের পাশে থাকার অনুমতি দেওয়ার জন্য ক্লাসে font-sizeসেট করা হয়েছে (এটি উপাদানগুলির মধ্যে সাদা ব্যবধানটি সরিয়ে দেয় )। যদি আপনি ডিফল্ট ব্যবহার বা পরিমাপ ব্যবহার করে ওভাররাইড করতে চান তবে এটি উপাদানটির ফন্ট-আকারগুলিতে বিরূপ প্রভাব ফেলতে পারে ।0.input-appendinline-blockinputem%

Comments

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

— পিগার্ডিরিও

@ পিগার্ডিরিও - আপনি পুরোপুরি ঠিক বলেছেন। এটি ভুল বলে মনে হয়েছিল এবং আমার মস্তিষ্কে চড় মারার পরে ক্লাসটির কথা মনে .input-appendপড়ল।

— আমার হেড হার্টস

এটি আশ্চর্যজনক বলে মনে হচ্ছে এটি করার জন্য আপনার একটি র‍্যাপার ক্লাসের প্রয়োজন হবে। সেগুলি কি ডিফল্টরূপে লাইন করা উচিত নয়?

— opsb

@opsb যদি তারা একই পরিমাণে উল্লম্ব স্থান গ্রহণ করে তবে হ্যাঁ তারা। তবে টুইটার বুটস্ট্র্যাপের ইনপুট ক্ষেত্রগুলির একটি রয়েছে margin-bottom: 9pxতবে বোতামগুলি তেমনভাবে থাকে না কারণ তারা একই উল্লম্ব স্থানটি গ্রহণ করে না। যেহেতু উভয় উপাদানগুলির একটি middleউল্লম্ব সারিবদ্ধতা রয়েছে তাই পার্থক্যের কারণে বোতামটি অফসেট হয়। .input-appendমোড়ক ব্যবহার করা এই মার্জিন-নীচের মানটিকে সরিয়ে দেয়।

— আমার হেড হার্ট

ডান, আমি অনুমান করি যে এটি অন্য ফর্ম বিন্যাসগুলি ভেঙে দেবে যদি তাদের ডিফল্টরূপে একই উল্লম্ব উচ্চতা থাকে।

— opsb

Answer 2

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

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

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->

কটাক্ষপাত BS4 ইনপুট-গ্রুপের ডক আরো অনেক উদাহরণ জন্য।

Comments

অন্যগুলি আমার পক্ষে কাজ করে নি, এটি আমি যেমন চেয়েছিলাম ঠিক তেমনভাবে করেছে। ধন্যবাদ.

— কল্যান্ডাস

ক্লাস বরাদ্দ করার জন্য অতিরিক্ত স্প্যান ট্যাগ তৈরি করা আমার পক্ষে কাজ হয়নি, তবে আমি সেই ক্লাসটি <div class="form-group input-group-btn">

— ডিভ

এই উত্তরটি BS4 এর জন্য পুরানো, আমার উত্তরটি একবার দেখুন।

— আলেকজান্ডার কিম

Answer 3

শুধু মাথা আপ, এই বলা জন্য বিশেষ সিএসএস বর্গ বলে মনে হচ্ছে form-horizontal

ইনপুট-সংযোজনটির আরও একটি পার্শ্ব প্রতিক্রিয়া রয়েছে, এটি ফন্টের আকারকে শূন্যে ফেলেছে

Comments

+1 ভাল স্পট - তারা কেন font-size: 0নতুন কিছু ব্যবহার করেছে এবং শিখেছে সে সম্পর্কে আমাকে তাকাতে হয়েছিল :) ধন্যবাদ!

— আমার প্রধানের ক্ষতি

Answer 4

। Form-inline ব্যবহার করুন = এটি একটি কমপ্যাক্ট লেআউটের জন্য লেবেলগুলি এবং ইনলাইন-ব্লক নিয়ন্ত্রণগুলিকে বামে সারিবদ্ধ করবে

উদাহরণ: http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.for-অনুভূমিক = ডান সারিবদ্ধ লেবেলগুলি এবং এগুলি নিয়ন্ত্রণের মতো একই লাইনে উপস্থিত হওয়ার জন্য বাম দিকে ভাসিয়ে রাখুন যা 2 কলামের ফর্ম বিন্যাসের জন্য আরও ভাল।

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

উদাহরণ: http://twitter.github.io/bootstrap/base-css.html#forms

Comments

আমি form-inlineবুটস্ট্রাপ 3 এর জন্য কাজ করে তা নিশ্চিত করতে পারি Thanks ধন্যবাদ

— অস্টিন

ফ্যান্টাস্টিক! ঝামেলা ফর্মের জন্য ঠিক আমার কী প্রয়োজন!

— it_notjack

দেখে মনে হচ্ছে .ফর্ম-ইনলাইনটি কমপক্ষে 768px প্রশস্ত ভিউপোর্টের মধ্যেই কাজ করে: w3schools.com/bootstrap/bootstrap_forms.asp

— anemaria20

Answer 5

আমি সর্বোপরি চেষ্টা করেছিলাম এবং কয়েকটি পরিবর্তন যা আমি ভাগ করতে চাই তা দিয়ে শেষ করেছি। এখানে কোডটি আমার পক্ষে কাজ করে (সংযুক্ত স্ক্রিনশটটি সন্ধান করুন):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

আপনি যদি এটি কাজ করে দেখতে চান তবে কেবলমাত্র সম্পাদক হিসাবে নীচের কোডটি ব্যবহার করুন:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

আশাকরি এটা সাহায্য করবে.

Comments

এটি কোন বুটস্ট্র্যাপ সংস্করণটির জন্য? এবং কোন সমস্যাটি এটি ব্যবহার না করার কারণ করে style="width:0;"?

— কার্ল অ্যাডলার

আপনি যদি প্রস্থ: 0 ব্যবহার করেন না তবে এটি পৃষ্ঠার সম্পূর্ণ প্রস্থ গ্রহণ করবে।

— অভিমন্যু

বুটস্ট্র্যাপের মতো <div class="col-md-4">কোনও প্রয়োজন নেই এমন কর্নেল-এলিমেন্ট দিয়ে মোড়ানো হবেwidth: 0

— কার্ল অ্যাডলার

আমি সেট করেছি কারণ আমি চাই না যে ইনপুট নিয়ন্ত্রণগুলি পর্দার পুরো প্রস্থ গ্রহণ করতে পারে

— অভিমন্যু

Answer 6

আমিও একই ইস্যু নিয়ে লড়াই করছিলাম। আমি যে বুটস্ট্র্যাপ ক্লাসগুলি ব্যবহার করি সেগুলি আমার পক্ষে কাজ করছে না। আমি নীচের মত একটি workaround নিয়ে এসেছি:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

মূলত, আমি শ্রেণি "ফর্ম-নিয়ন্ত্রণ" এর প্রদর্শন সম্পত্তিটি ওভাররড করেছি এবং আকার এবং অবস্থান সংশোধন করার জন্য অন্যান্য স্টাইলের বৈশিষ্ট্য ব্যবহার করেছি।

নিম্নলিখিত ফলাফল:

Answer 7

বুটস্ট্র্যাপ 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

Answer 8

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Answer 9

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

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

Answer 10

সরাসরি সম্পর্কিত নয়, যদি না আপনার অনুরূপ কোড থাকে তবে আমি ফর্ম-ইনলাইন, বুটস্ট্র্যাপ 3.3.7 এর জন্য একটি অদ্ভুত আচরণ লক্ষ্য করেছি

আমি এটির জন্য সারি এবং কক্ষগুলি ব্যবহার করিনি কারণ এটি একটি ডেস্কটপ প্রকল্প, যদি খোলার ট্যাগটি টেবিলের নীচে থাকে (এই ক্ষেত্রে):

<table class="form-inline"> 
<form> 
<tr>

ফর্ম উপাদানগুলি স্ট্যাক হবে।

স্যুইচ করুন এবং এটি সঠিকভাবে রেখাযুক্ত।

<form>
<table class="form-inline">
<tr>

সাফারি 10.0.2 এবং সর্বশেষ ক্রোম কোনও পার্থক্য করেনি। হয়তো আমার লেআউটটি ভুল ছিল তবে এটি খুব ক্ষমাকারী নয়।

Answer 11

বাম হিসাবে একটি ইনপুট ফ্লোট নিন Take তারপরে বোতামটি নিয়ে ডানদিকে ভাসাবেন। আপনি ক্লিয়ারফিক্স ক্লাস করতে পারেন যখন আপনি একাধিক দূরত্ব নিয়ে যান।

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

Answer 12

style="padding-top: 8px"

আপনার সারিতে আপনার ডিভিটি উপরে বা নীচে স্থানান্তর করতে এটি ব্যবহার করুন। আমার জন্য বিস্ময়কর কাজ করে।