ইনলাইন-ফর্মের মধ্যে পূর্ণ প্রস্থের পাঠ্য-ইনপুট বুটস্ট্র্যাপ করুন

Question

আমি এমন একটি পাঠ্যবাক্স তৈরির জন্য সংগ্রাম করছি যা আমার ধারক ক্ষেত্রের পুরো প্রস্থের সাথে খাপ খায় ।

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

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

এখানে একটি বেহালতা: http://jsfiddle.net/52VtD/4119/ এম্বেড / রিসাল্ট /

সম্পাদনা করুন:

নির্বাচিত উত্তরটি প্রতিটি উপায়ে পুরোপুরি এবং একটি দুর্দান্ত সহায়তা। এটিই আমি ব্যবহার করে শেষ করেছি। তবে আমি মনে করি আমার প্রাথমিক সমস্যাটি ভিজ্যুয়াল স্টুডিও 2013 এর মধ্যে ডিফল্ট এমভিসি 5 টেমপ্লেটটি নিয়ে আসলে একটি সমস্যা ছিল Site এটি সাইটসিএসএস-এ এতে রয়েছে:

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

স্পষ্টতই এটি পাঠ্য-ইনপুটটিকে যথাযথভাবে প্রসারিত করা থেকে আটকাচ্ছিল ... ভবিষ্যতের এএসপি.নেট টেম্পলেট ব্যবহারকারীদের জন্য সুস্পষ্ট সতর্কতা ...

Comments

আমি কেবল ডিফল্ট এমভিসি 5 টেমপ্লেট নিয়ে সমস্যাটি সম্পর্কে আপনার সন্ধানটি দ্বিতীয় করতে চাই। আমি এই সমস্যাটি অনুসন্ধান করতে এক ঘন্টা ব্যয় করেছি এবং জাসফিডেলে একটি কাজের নমুনা খুঁজে পাওয়ার আগে বুটস্ট্র্যাপে অভিশাপ দিয়েছিলাম (যা মিথ্যা) আমাকে একটি পরিষ্কার HTML পৃষ্ঠা দিয়ে আবার শুরু করার অনুরোধ জানিয়েছিল এবং এটি দুর্দান্ত কাজ করেছিল। তবেই আমি বুঝতে পারলাম ভিএস ২০১৩ টেমপ্লেটটিতে কোনও সমস্যা আছে এবং এই পোস্টটি জুড়ে এসেছিল। সর্বাধিক প্রস্থের জন্য কেন সিদ্ধান্ত তা জাগ্রততা জানে, তবে এটি অন্য ব্যক্তির কোড ব্যবহার করার সময় আপনাকে সতর্ক থাকতে হবে তা দেখায়। এটির মতো সমস্যার সাথে আটকে গেলে এটি বেসিকগুলিতে ফিরে যাওয়ারও প্রমাণ test

— জেসন স্নেল্ডার্স

ধন্যবাদ, এছাড়াও এসপ নেট টেমপ্লেট ব্যবহার করে, তবে আমি ইতিমধ্যে কারও কাছে ইনপুটটির সর্বাধিক প্রস্থ নির্ধারণ করেছি, তবে আমি নিজে নিজে এটি 100% এ সেট করলেই এটি পুরো প্রস্থটি নেয় না। তবে তার ডানদিকে বোতামটি নীচে নেমে যায় এবং আমি এটি একই লাইনে থাকতে চাই।

— রোনেন ফেস্টিংগার

@ কিল্লাইন আপনার প্রশ্নের সম্পাদনা আমার মাথাব্যাথা সমাধান করেছে। এটি আসলে সমস্যা ছিল, আপনার পোস্ট সম্পাদনার জন্য আপনাকে ধন্যবাদ!

— শিখা_ফিনিক্স

আমি আমার সাইট.এসএস ফাইল থেকে সিএসএসের সেই বিটটি সরিয়েছি এবং আমার এখনও একই সমস্যা রয়েছে। কোন ধারনা?

— dave317

Dayuuumn! এটির সাথে লড়াই করে চলেছে এবং এটি একটি এমভিসি সমস্যা! টেক্সটবক্সের সিএসএস বৈশিষ্ট্যগুলি পর্যবেক্ষণ না করার জন্য আমি কত বোকা! এই বিষয়টি চিহ্নিত করার জন্য ধন্যবাদ!

— হাজাত

Answer 1

বুটস্ট্র্যাপ ডক্স এ সম্পর্কে বলে :

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

form-controlআপনি যদি form-inlineআপনার ফর্মটিতে শ্রেণি ব্যবহার করেন তবে শ্রেণিটি প্রয়োগ না করলে সমস্ত ফর্ম উপাদানগুলির হিসাবে 100% এর ডিফল্ট প্রস্থ হয় gets

আপনি এই অংশটি দেখতে পাবেন যেখানে বুটস্ট্রেপসিএসএস (বা .হীন, আপনি যা পছন্দ করেন) একবার দেখে নিতে পারেন:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

হতে পারে আপনার ইনপুট-গোষ্ঠীগুলির দিকে নজর দেওয়া উচিত , যেহেতু আমার অনুমান যে তারা ব্যবহার করতে চান তার ঠিকঠাক চিহ্ন রয়েছে ( এখানে ফিডাল কাজ করা ):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

Comments

উপরে আমার সম্পাদনা দেখুন। আমি মনে করি এএসপি.এনইটি টেম্পলেটে সাইট.কম এটি আমাকে পেয়েছে। তবে এটি একটি দুর্দান্ত উত্তর এবং ভবিষ্যতের রেফারেন্সের জন্য খুব সহায়ক।

— কিলনাইন

ইনপুট গোষ্ঠীগুলি এই পথে চলার উপায়। ব্যক্তিগতভাবে, আমি যখন ইনপুটটির পাশে তত্ক্ষণাত বোতামটি চাই না তখন আমি কোনও ইনলাইন ফর্মের অনুরূপ হয়ে ইনপুট গ্রুপ শৈলীটি সামঞ্জস্য করি। বুটস্ট্র্যাপের সাথে কম কাজ করার ডেমো অন্তর্ভুক্ত করা হয়েছে: jsfiddle.net/silb3r/gwxc5c75

— সিএফএক্স

চমৎকার! আমি জানি যে প্রশ্নটি বুটস্ট্র্যাপ-নির্দিষ্ট, তবে অন্য কেউ যদি এটিকে বুটস্ট্র্যাপলেস (কম বুটস্ট্র্যাপ নয়) সাইটে ফেলে দিতে চান তবে আমি প্রাসঙ্গিক শৈলীগুলি এখানে সন্ধান করেছি: স্ট্যাকওভারফ্লো.com

— হেনরি

ফ্রেডের বুটস্ট্র্যাপ লিঙ্কটি নষ্ট হয়ে গেছে। এটি সম্ভবত বুটস্ট্র্যাপের নতুন সংস্করণটির দিকে ইঙ্গিত করছে এবং ফিডাল আর কাজ করছে না।

— ক্লো

@ চলো আপনি ঠিক বলেছেন, ফিডল একটি বুটস্ট্র্যাপ সিএসএস ফাইল ব্যবহার করছিল যা এখন আর নেই। আমি সবেমাত্র ফিডল আপডেট করেছি, এটি আবার কাজ করছে।

— morten.c

Answer 2

এই জাতীয় কিছু দেখুন:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

Answer 3

অনুরূপ প্রশ্নে বর্ণিত হিসাবে , input-groupশ্রেণীর উদাহরণগুলি সরিয়ে ফেলার চেষ্টা করুন এবং দেখুন যে এটি সাহায্য করে কিনা।

বুটস্ট্র্যাপে রেফারিং:

স্বতন্ত্র ফর্ম নিয়ন্ত্রণগুলি স্বয়ংক্রিয়ভাবে কিছু বিশ্বব্যাপী স্টাইলিং গ্রহণ করে। সমস্ত পাঠ্য, এবং .ফর্ম-নিয়ন্ত্রণ সহ উপাদানগুলি প্রস্থে সেট করা হয়েছে: 100%; গতানুগতিক. সর্বোত্তম ব্যবধানের জন্য .ফর্ম-গ্রুপে লেবেল এবং নিয়ন্ত্রণগুলি মোড়ানো।

Comments

প্রতি মুর্টেন এটি ইনলাইন ফর্মগুলির জন্য প্রযোজ্য নয়। সুতরাং, আপনার ইনপুট-গ্রুপটি এটি 100% হতে বাধ্য করার জন্য প্রয়োজন

— ব্যবহারকারীর 441058

Answer 4

আপনার পছন্দসই ফলাফল অর্জন করতে নীচের মতো কিছু চেষ্টা করুন

input {
    max-width: 100%;
}

Answer 5

বুটস্ট্র্যাপ> ৪.১ সহ এটি ফ্লেক্সবক্স ইউটিলিটি ক্লাস ব্যবহারের ক্ষেত্রে কেবল একটি ঘটনা। আপনার কলামের ভিতরে কেবল একটি ফ্লেক্সবক্স ধারক রাখুন এবং তারপরে এর মধ্যে থাকা সমস্ত উপাদানকে "ফ্লেক্স-ফিল" শ্রেণি দিন। ইনলাইন ফর্মগুলির মতো আপনার নিজের উপাদানগুলিতে মার্জিন / প্যাডিং সেট করতে হবে।

.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-12">
		<div class="d-flex">
			<label class="flex-fill prop-label">Label:</label>
			<input type="text" class="flex-fill form-control prop-field">
		</div>
	</div>
</div>