বুটস্ট্র্যাপ 3.0: একই লাইনে পাঠ্য এবং ইনপুট কীভাবে থাকবে?

Question

আমি বর্তমানে আমার ওয়েবসাইট বুটস্ট্র্যাপ 3.0 এ স্যুইচ করছি। ফর্ম ইনপুট এবং পাঠ্য বিন্যাসে আমার একটি সমস্যা হচ্ছে। বুটস্ট্র্যাপ 2 এ যা কাজ করেছে তা বুটস্ট্র্যাপ 3 তে কাজ করে না।

ফর্ম ইনপুটটির আগে এবং পরে একই লাইনে আমি কীভাবে পাঠ্য পেতে পারি? আমি উদাহরণের বুটস্ট্র্যাপ 3 সংস্করণে 'ফর্ম-নিয়ন্ত্রণ "শ্রেণিতে কোনও সমস্যার জন্য সংকীর্ণ করেছি।

আমি কীভাবে এক লাইনে সমস্ত পাঠ্য এবং ইনপুট পেতে পারি? আমি বুটস্ট্র্যাপ 3 উদাহরণটি jsfizz এর বুটস্ট্র্যাপ 2 উদাহরণের মতো দেখতে চাই।

জেএস ফিডাল উদাহরণ

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

আপডেট: আমি কোডটি এতে পরিবর্তন করি যা কাজ করে তবে এখন সারিবদ্ধকরণে সমস্যা হচ্ছে। কোন ধারনা?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Comments

form-controlআপনার বুটস্ট্র্যাপ 3 উদাহরণে কেবলমাত্র একটি অতিরিক্ত ক্লাস রয়েছে সেগুলি উভয়ই একই ।

— কাইল নিডহাম

বুটস্ট্র্যাপ ডক্সে উদাহরণটি দেখুন। আপনি getbootstrap.com/css/#forms-horizontal

— বাম্পারবক্স

আমি দুঃখিত তবে আমি এখনও বিভ্রান্ত নিম্ন উদাহরণ (BS3) এর 'ফর্ম-নিয়ন্ত্রণ' শ্রেণি রয়েছে যা দেয় এটি আরও ভাল চেহারা। আমি আরও ভাল চেহারা চাই এবং পাঠ্য এবং ইনপুট একই লাইনে রাখি। আমি কী মিস করছি?

— ফ্যাট ফ্যান্টাসমা

আমাকে প্রশ্নটি অন্যভাবে জিজ্ঞাসা করুন। আমি কীভাবে একই লাইনে পাঠ্য এবং ইনপুট ক্ষেত্রগুলি পেতে এবং দুর্দান্ত কলামগুলিতে সারিবদ্ধ হব? এই ফিডল jsfiddle.net/fatfantasma/QwkpE দেখুন । অবশ্যই, আমি একই লাইনে খুব ডানদিকে পাঠ্য যুক্ত করতে চাই। আমি যে কিভাবে করতে হবে?

— ফ্যাট ফ্যান্টাসমা

.input-lgইনপুট ক্ষেত্রের উচ্চতা বৃদ্ধি করে, তবে আমাদের পাশাপাশি লেবেলের উচ্চতা এবং আকার সামঞ্জস্য করতে একটি শ্রেণি প্রয়োজন।

— পেট্রাস থেরন

Answer 1

আমি প্রতিটি উপাদান যা আপনি ইনলাইন চান আপনার সারি এর মধ্যে একটি পৃথক কল-এমডি- * ডিভি এর ভিতরে রাখতে চাই। অথবা আপনার উপাদানগুলিকে ইনলাইন প্রদর্শন করতে বাধ্য করুন। ফর্ম-নিয়ন্ত্রণ শ্রেণিটি ব্লক প্রদর্শন করে কারণ বুটস্ট্র্যাপ মনে করে যে এটি করা উচিত।

Answer 2

সরাসরি ডকুমেন্টেশন থেকে http://getbootstrap.com/css/#forms-horizontal ।

ফর্মটিতে যুক্ত করে একটি অনুভূমিক বিন্যাসে লেবেলগুলি এবং ফর্ম নিয়ন্ত্রণের গোষ্ঠীগুলিকে সারিবদ্ধ করতে বুটস্ট্র্যাপের পূর্বনির্ধারিত গ্রিড শ্রেণিগুলি ব্যবহার করুন .form-horizontal(যা কোনও হতে হবে না <form>)। .form-groupsগ্রিড সারি হিসাবে আচরণ করার জন্য এমন পরিবর্তনগুলি করা, তাই দরকার নেই.row ।

নমুনা:

<form class="form-horizontal">
  <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>

Comments

+1 এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, যেহেতু এটি অফিসিয়াল ডকুমেন্টেশনের সাথে লিঙ্ক করে

— EProgrammerNotFound

এটি কেবল একটি লিঙ্কের উত্তর, এবং রেফারেন্সযুক্ত পৃষ্ঠাটি পরিবর্তিত হয় বা সরিয়ে দেওয়া হয়, উদাহরণ ছাড়াই গ্রহণযোগ্য হওয়া উচিত নয়।

— এনডিএম

সঠিক উত্তরটি সঠিক উত্তর কেন? এটি সঠিক উত্তর হওয়া উচিত! @ ফ্যাট ফ্যান্টাসমা

— JMASTER বি

এগুলি একটি ফর্ম-নিয়ন্ত্রণ-স্ট্যাটিকের মধ্যে

— আবদ্ধ করা উচিত

@ হোয়াইটকাট যা একটি প্রতিক্রিয়াশীল বিন্যাসে নকশার ভিত্তিতে - মোবাইলটিতেও কাজ করতে এটি পেতে - কল-স্ম- * এর পরিবর্তে কল-এক্সএস- * ব্যবহার করুন

— নিকো

Answer 3

আপনার যা দরকার তা হচ্ছে .form-inlineক্লাস। আপনার অবশ্যই নতুন .form.inlineক্লাসের সাথে প্রতিটি কন্ট্রোলের জন্য প্রস্থ নির্দিষ্ট করতে হবে, সতর্ক হওয়া দরকার ।

এই একবার দেখুন

Comments

form-horizontalএটি ক্লাসের চেয়ে উত্তম উত্তর হওয়া উচিত কারণ এটি form-groupব্লকে ক্লাস শোগুলির সাথে ডিভকে বাধ্য করে না ।

— শওমঝু

এটি শুধুমাত্র কমপক্ষে 768px প্রশস্ত ভিউপোর্টগুলির মধ্যে ফর্মগুলিতে প্রযোজ্য।

— আরএমচারি

Answer 4

এগুলির কোনওোটাই আমার পক্ষে কাজ করেনি, .form-control-staticক্লাস ব্যবহার করতে হয়নি ।

http://getbootstrap.com/css/#forms-controls-static

Comments

এটি সত্যিই সাহায্য করেছে। এটি ছাড়া লেবেল পাঠ্য এবং ইনপুট পাঠ্যটি কল -

— ব্রেন্ডন কোডি-কেনি

এটি সঠিক উত্তর হওয়া উচিত, বিশেষত আপনি যদি নিজের ফর্মটি ছোট ডিভাইসগুলিতে সঠিকভাবে আবৃত করতে চান

— rmcsharry

হ্যাঁ, এটি আমার পক্ষেও কাজ করে। অন্যান্য সমাধানগুলি কল-এক্স-এক্স-কলামগুলির জন্য ব্যর্থ। 'ফর্ম-কন্ট্রোল-স্ট্যাটিক টেক্সট-রাইট' ব্যবহার করে আমার জন্য BS 3.3.7 এ কাজ করেছে।

— নিউট্রিনো

Answer 5

আপনি এটি এর মতো করতে পারেন:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

ফিডল

Answer 6

কেবল বিভাগের মাকে "শ্রেণি =" কল-এলজি -12 "" দিন

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

এটা হবে

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Answer 7

আমি যেভাবে সমাধান করেছি তা হ'ল আমার সাইটের মূল সিএসএসে আমার সমস্ত পাঠ্যবাক্সগুলির জন্য একটি ওভাররাইড যুক্ত করা:

.form-control {
    display:initial !important;
}

Comments

এটি কি করে?

— AgilePro

Answer 8

আমাদের দয়া করে আপডেট কোডটি পরীক্ষা করুন

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

শ্রদ্ধা সহ ধন্যবাদ

Answer 9

অনুভূমিক উপাদানটির জন্য বুটস্ট্র্যাপ 4 এ আপনি আপনার লেবেল এবং নিয়ন্ত্রণগুলির প্রস্থ নির্দিষ্ট করতে ক্লাসগুলির .rowসাথে ব্যবহার করতে পারেন .col-*-*। এই লিঙ্কটি দেখুন ।

এবং যদি আপনি একক অনুভূমিক সারিতে লেবেল, ফর্ম নিয়ন্ত্রণ এবং বোতামগুলির একটি সিরিজ প্রদর্শন করতে চান তবে আপনি .form-inlineআরও তথ্যের জন্য এই লিঙ্কটি ব্যবহার করতে পারেন

Comments

প্রশ্নটিতে বিশেষত বুটস্ট্র্যাপ 3 বলা হয়েছে

— ব্লুপয়েন্ট মিডিয়া

বুটস্ট্র্যাপ 4 নিয়ে আমারও একই সমস্যা ছিল এবং আমি অন্য কাউকে সাহায্য করার জন্য এটি পোস্ট করেছি

— শোজেদদিন

Answer 10

অথবা আপনি এটি করতে পারেন:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

আমি উপরের প্রতিটি পরামর্শের চেষ্টা করেছি এবং সেগুলির কোনওটিই কাজ করে নি। আমি 12 কলাম গ্রিডে একটি নির্দিষ্ট সংখ্যক কলাম বেছে নিতে চাই না। আমি প্রম্পটটি চাই এবং তার ঠিক পরে ইনপুট চাই এবং কলামগুলি প্রয়োজন অনুসারে প্রসারিত করতে চাই।

হ্যাঁ, আমি জানি, এটি বুটস্ট্র্যাপের সমস্ত কিছুর বিরুদ্ধে। এবং আপনার কোনও টেবিল ব্যবহার করা উচিত নয়। কারণ টেবিলের চেয়ে ডিআইভি অনেক ভাল। তবে সমস্যাটি হ'ল টেবিল, সারি এবং কক্ষগুলি আসলে কাজ করে OR

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

"পয়েন্ট ইন কেস - এই আলোচনার উপর ভিত্তি করে আমি কয়েকটি বিদ্যমান টিডিএস এবং টিআরএসকে ডিভগুলিতে রূপান্তরিত করেছি। 45 মিনিটের মধ্যে গোলমাল থেকে সমস্ত কিছু একে অপরের পাশে লাইন করার চেষ্টা করা হয়েছিল এবং আমি ছেড়ে দিয়েছি। 10 সেকেন্ড পরে টিডি ফিরে আসে - কাজ করে - সরাসরি অবিলম্বে - সমস্ত ব্রাউজারগুলিতে, আরও কিছু করার নেই Please দয়া করে আমাকে বোঝানোর চেষ্টা করুন - আমাকে অন্য কোনও উপায়ে এটি করার জন্য আপনার পক্ষে কী ন্যায়সঙ্গততা আছে! " [ Https://stackoverflow.com/a/4278073/1758051] দেখুন

এবং এই: "

লেআউটটি সহজ হওয়া উচিত। সিএসএসে শিরোনাম এবং পাদচরণ সহ একটি গতিশীল তিনটি কলাম লেআউট কীভাবে অর্জন করবেন সে সম্পর্কে লিখিত নিবন্ধগুলি দেখায় যে এটি দরিদ্র বিন্যাস সিস্টেম। অবশ্যই আপনি এটি কাজে লাগাতে পারেন তবে এটি কীভাবে করা যায় সে সম্পর্কে আক্ষরিক অর্থে কয়েকশ নিবন্ধ রয়েছে। টেবিলগুলির সাথে অনুরূপ লেআউটের জন্য এরকম আর কোনও নিবন্ধ নেই কারণ এটি স্পষ্টতই সুস্পষ্ট। আপনি টেবিলগুলির বিপরীতে এবং সিএসএসের পক্ষে যা বলবেন না কেন, এটি একটি সত্যই এটিকে পূর্বাবস্থায় ফিরিয়ে দেয়: সিএসএসে একটি প্রাথমিক তিনটি কলাম লেআউটকে প্রায়শই "দ্য হলি গ্রেইল" বলা হয়। "[ Https://stackoverflow.com/a/4964107/ 1758051]

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

Comments

টেবিলগুলি প্রতিক্রিয়াশীল নয়।

— পেড্রো মোরেইরা

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

— AgilePro

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

— পেড্রো মোরিরা