ความกว้างของอินพุตบน Bootstrap 3

อัปเดตอีกครั้ง:ฉันกำลังปิดคำถามนี้โดยเลือกคำตอบยอดนิยมเพื่อป้องกันไม่ให้ผู้คนเพิ่มคำตอบโดยไม่เข้าใจคำถามจริงๆ ในความเป็นจริงไม่มีวิธีที่จะทำกับการสร้างในการทำงานโดยไม่ต้องใช้กริดหรือเพิ่ม CSS พิเศษ กริดทำงานได้ไม่ดีหากคุณต้องรับมือกับhelp-blockองค์ประกอบที่จำเป็นต้องทำมากกว่าการป้อนข้อมูลสั้น ๆ แต่พวกมันคือ 'build-in' ถ้าเป็นเรื่องที่ผมขอแนะนำให้ใช้คลาส CSS พิเศษที่คุณจะพบในการอภิปราย BS3 ที่นี่ ตอนนี้ BS4 ออกมาแล้วมันเป็นไปได้ที่จะใช้สไตล์การปรับขนาดที่รวมไว้เพื่อจัดการสิ่งนี้ดังนั้นสิ่งนี้จะไม่เกี่ยวข้องกันอีกต่อไป ขอขอบคุณทุกท่านที่ให้ความสำคัญกับคำถาม SO ที่ได้รับความนิยมนี้

ปรับปรุง:คำถามนี้ยังคงเปิดอยู่เพราะมันเป็นเรื่องเกี่ยวกับตัวในการทำงานในระดับปริญญาตรีสาขาการจัดการความกว้างของการป้อนข้อมูลโดยไม่ต้อง resorting ตาราง (บางครั้งพวกเขาจะต้องมีการจัดการอย่างเป็นอิสระ) ฉันใช้คลาสที่กำหนดเองเพื่อจัดการสิ่งนี้อยู่แล้วดังนั้นนี่ไม่ใช่วิธีการเกี่ยวกับ css ขั้นพื้นฐาน งานอยู่ในรายการสนทนาคุณลักษณะของ BS และยังไม่ได้รับการแก้ไข

คำถามเดิม: ทุกคนสามารถหาวิธีจัดการความกว้างของอินพุตใน BS 3 ได้หรือไม่? ขณะนี้ฉันใช้คลาสที่กำหนดเองเพื่อเพิ่มฟังก์ชันการทำงานนั้น แต่ฉันอาจพลาดบางตัวเลือกที่ไม่มีเอกสาร

เอกสารปัจจุบันบอกว่าจะใช้. col-lg-x แต่ไม่สามารถใช้งานได้อย่างชัดเจนเนื่องจากสามารถใช้กับคอนเทนเนอร์ div เท่านั้นซึ่งจะทำให้เกิดปัญหาเกี่ยวกับเลย์เอาต์ / โฟลตทุกชนิด

นี่คือซอ แปลกคือบนซอฉันไม่สามารถแม้แต่จะปรับขนาดกลุ่มแบบฟอร์มได้

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

สิ่งที่คุณต้องการจะทำได้อย่างแน่นอน

สิ่งที่คุณต้องการคือการรวมกลุ่ม 'แต่ละกลุ่มไว้ในแถวไม่ใช่แบบฟอร์มทั้งหมดที่มีเพียงแถวเดียว ที่นี่:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

ฉันทำjsfiddle ใหม่ : jsfiddle ใหม่

โปรดทราบว่าในซอใหม่ฉันได้เพิ่ม 'col-xs-5' เพื่อให้คุณสามารถดูได้ในหน้าจอขนาดเล็กเช่นกัน - การลบพวกมันไม่ได้สร้างความแตกต่าง แต่โปรดจำไว้ว่าในชั้นเรียนดั้งเดิมของคุณคุณใช้ 'col-lg-1' เท่านั้น ซึ่งหมายความว่าหากความกว้างของหน้าจอเล็กกว่าขนาดข้อความค้นหาสื่อ 'lg' ระบบจะใช้การบล็อกเริ่มต้น โดยพื้นฐานแล้วใช้ 'col-lg-1' เท่านั้นตรรกะที่คุณใช้คือ:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

ดูระบบตาราง Bootstrap 3สำหรับข้อมูลเพิ่มเติม ฉันหวังว่าฉันจะชัดเจนมิฉะนั้นแจ้งให้ฉันทราบและฉันจะทำอย่างละเอียด

ใน Bootstrap 3

คุณสามารถสร้างสไตล์ที่กำหนดเองได้ง่ายๆ:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

จากนั้นเพิ่มลงในแบบฟอร์มการควบคุมดังนี้:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

วิธีนี้คุณไม่ต้องใส่มาร์กอัพพิเศษสำหรับเลย์เอาต์ใน HTML ของคุณ

ASP.net MVC ไปที่ Content- Site.css และลบหรือแสดงความคิดเห็นบรรทัดนี้:

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

ฉันคิดว่าคุณจำเป็นต้องปิดอินพุตภายในcol-lg-4และจากนั้นภายในform-groupและทุกอย่างจะได้รับการบรรจุในform-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

การสาธิตเกี่ยวกับ Bootply - http://bootply.com/78156

แก้ไข:จาก Bootstrap 3 เอกสาร ..

อินพุตตัวเลือกและข้อความกว้าง 100% ตามค่าเริ่มต้นใน Bootstrap ในการใช้แบบฟอร์มอินไลน์คุณจะต้องตั้งค่าความกว้างของตัวควบคุมฟอร์มที่ใช้ภายใน

ดังนั้นอีกทางเลือกหนึ่งคือการตั้งค่าความกว้างเฉพาะโดยใช้ CSS:

.form-control {
    width:100px;
}

หรือนำไปใช้col-sm-*กับ `ฟอร์มกลุ่ม '

เอกสารปัจจุบันบอกว่าจะใช้. col-xs-x ไม่ใช่ lg จากนั้นฉันลองเล่นซอและดูเหมือนว่าจะใช้ได้:

http://jsfiddle.net/tX3ae/225/

เพื่อให้เลย์เอาต์คุณอาจเปลี่ยนตำแหน่งที่คุณวางคลาส "row" เช่นนี้

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

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

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

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

เพิ่มคลาสให้กับ form.group เพื่อ จำกัด อินพุต

ถ้าคุณใช้เทมเพลต Master.Site ใน Visual Studio 15 โครงการฐานมี "Site.css" ซึ่งมีความกว้างมากกว่าความกว้างของเขตข้อมูลควบคุมฟอร์ม

ฉันไม่สามารถรับความกว้างของกล่องข้อความของฉันที่จะกว้างกว่าประมาณ 300px ได้ ฉันพยายามทุกอย่างและไม่มีอะไรทำงาน ฉันพบว่ามีการตั้งค่าใน Site.css ซึ่งเป็นสาเหตุของปัญหา

กำจัดสิ่งนี้และคุณสามารถควบคุมความกว้างของฟิลด์ได้

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

ฉันรู้ว่านี่เป็นเธรดเก่า แต่ฉันพบปัญหาเดียวกันกับแบบฟอร์มอินไลน์และไม่มีตัวเลือกใด ๆ ด้านบนแก้ปัญหาได้ ดังนั้นฉันจึงแก้ไขรูปแบบอินไลน์ของฉันดังนี้: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

นั่นคือทางออกของฉัน แฮ็คบิตแฮ็ค แต่ทำงานสำหรับแบบอินไลน์

คุณสามารถเพิ่มคุณสมบัติสไตล์หรือคุณสามารถเพิ่มคำนิยามสำหรับแท็กการป้อนข้อมูลในไฟล์ css

ตัวเลือก 1: การเพิ่มคุณสมบัติสไตล์

<input type="text" class="form-control" id="ex1" style="width: 100px;">

ตัวเลือกที่ 2: คำจำกัดความใน css

input{
  width: 100px
}

คุณสามารถเปลี่ยน 100px เป็นอัตโนมัติได้

ฉันหวังว่าฉันจะช่วย

ใน Bootstrap 3

อิลิเมนต์ <อินพุต>, <textarea> และ <select> ทั้งหมดที่มี. form-control ถูกตั้งค่าเป็น width: 100%; โดยค่าเริ่มต้น.

http://getbootstrap.com/css/#forms-example

ดูเหมือนว่าในบางกรณีเราต้องตั้งค่าความกว้างสูงสุดที่เราต้องการสำหรับอินพุตด้วยตนเอง

อย่างไรก็ตามตัวอย่างของคุณใช้ได้ เพียงตรวจสอบด้วยหน้าจอขนาดใหญ่เพื่อให้คุณสามารถเห็นชื่อและฟิลด์อีเมลได้รับ 2/12 ของด้วย (col-lg-1 + col-lg-1 และคุณมี 12 คอลัมน์) แต่ถ้าคุณมีหน้าจอที่เล็กกว่า (เพียงปรับขนาดเบราว์เซอร์ของคุณ) อินพุตจะขยายจนกระทั่งสิ้นสุดแถว

คุณไม่ต้องยอมแพ้ง่ายๆง่ายๆ :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

หากคุณต้องการลดหรือเพิ่มความกว้างขององค์ประกอบอินพุตของ Bootstrap ตามที่คุณต้องการฉันจะใช้max-widthใน CSS

นี่เป็นตัวอย่างง่ายๆที่ฉันสร้าง:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

ฉันได้ตั้งค่าความกว้างสูงสุดของแบบฟอร์มทั้งหมดเป็น 500px วิธีนี้คุณไม่จำเป็นต้องใช้ระบบกริดของ Bootstrap ใด ๆ และมันจะรักษารูปแบบการตอบสนอง

ฉันยังดิ้นรนกับปัญหาเดียวกันและนี่คือทางออกของฉัน

ที่มา HTML

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

ครอบคลุมรหัสอินพุตด้วยคลาส div อื่น

แหล่ง CSS

.input_width{
   width: 450px;
}

ให้การตั้งค่าความกว้างหรือระยะขอบใด ๆ ในชั้น div ที่ครอบคลุม

ความกว้างของอินพุต Bootstrap นั้นจะมีค่าเริ่มต้นเป็น 100% เสมอดังนั้นความกว้างจะเป็นไปตามความกว้างที่ครอบคลุม

นี่ไม่ใช่วิธีที่ดีที่สุด แต่วิธีแก้ปัญหาที่ง่ายที่สุดและเดียวเท่านั้นที่ฉันแก้ไขปัญหาได้

หวังว่านี่จะช่วยได้

ฉันไม่ทราบว่าทำไมทุกคนดูเหมือนจะมองข้ามไฟล์ site.css ในโฟลเดอร์เนื้อหา ดูบรรทัดที่ 22 ในไฟล์นี้แล้วคุณจะเห็นการตั้งค่าสำหรับอินพุตที่จะควบคุม ดูเหมือนว่าเว็บไซต์ของคุณไม่ได้อ้างอิงสไตล์ชีทนี้

ฉันเพิ่มสิ่งนี้:

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

เพื่อซอของคุณและใช้งานได้ดี

คุณไม่ควรอัปเดต bootstrap.css หรือ bootstrap.min.css การทำเช่นนั้นจะทำให้คุณล้มเหลวเมื่อ bootstrap ได้รับการอัพเดต นั่นคือเหตุผลที่ไฟล์ site.css รวมอยู่ด้วย ที่นี่คุณสามารถทำการเปลี่ยนแปลงไซต์ที่จะให้การออกแบบที่ตอบสนองต่อคุณกำลังมองหา

นี่คือซอกับมันทำงาน

เพิ่มและกำหนดคำศัพท์สำหรับstyle=""ฟิลด์ในฟิลด์อินพุตซึ่งเป็นวิธีที่ง่ายที่สุดในการดำเนินการ: ตัวอย่าง:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Bootstrap ใช้คลาส 'form-input' สำหรับการควบคุมคุณสมบัติของ 'input field' เพียงแค่เพิ่มคลาส 'อินพุตแบบฟอร์ม' ของคุณเองด้วยความกว้างที่ต้องการเส้นขอบขนาดข้อความ ฯลฯ ในไฟล์ css หรือส่วนหัวของคุณ

(หรือเพิ่มรหัสอินไลน์ size = '5' ในแอตทริบิวต์อินพุตในส่วนเนื้อหาโดยตรง)

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Bootstrap 3 ฉันประสบความสำเร็จในการจัดวางฟอร์มที่ตอบสนองได้ดี

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>