ترتيب مربع النص في صف واحد

Question

أحاول ترتيب مربعات النص في صف واحد باستخدام بوتستريب 3, المشكلة هي مربعات النص متداخلة أريد إزالة التداخل وتريد إظهار البيانات في صف واحد.التجريبي من التعليمات البرمجية أدناه هو http://jsfiddle.net/xrcwrn/h5A33/

الرمز الخاص بي هو

<form  id="addExpense" action="AddedExpense" method="post">
                        <div class="expenseDetails" >
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <div class="panel-info"><h4>Add Your Expenses <a href="#" id="add"><span class="glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Click to add new expense"></span></a></h4></div>
                                </div>
                                <div class="panel-body">
                                    <div class="row" id="0">
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
     <label>Expensed Type</label>
      <input  type="text"/>
  </div>
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
 <label>Amount</label>
  <input  type="text" name="expenseList[0].value" "/>
  </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1">
  <label>Date</label>
   <input  type="text" name="expenseList[0].dt" " cssClass="dt"/>
  </div>
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
   <label>Desc</label>
   <input  type="text" name="expenseList[0].description"/>
  </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1">
     <label>Receipt</label>
      <input  type="text" name="expenseList[0].img" />
 </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1 cl">
    <label >Delete</label>
    <img src="images/delete.png" class="delete"/>
 </div>
   </div>
  </div>
 </div>
                            <div class="col-xs-4 right">
                                <button type="submit" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </form>   

Answer 1

والسبب الرئيسي لذلك هو أنك لم تعط المدخلات الخاصة بك .فئة التحكم في النموذج.هناك أيضا بعض الأخطاء في الترميز الخاص بك مع اقتباسات إضافية خاطئة يجب إصلاحها ، ولكن هذا ليس سبب مشكلات التداخل.

بالإضافة إلى ذلك ، فإنه من غير الضروري أن يكون كول-شس-1 ، كول-سم-1 ، كول-لغ-1.استخدام فئة شس في حد ذاته سوف يكفي.فكر في فئات الأعمدة على أنها مضافة.مضيفا كول-شس-1 هو نوع من مثل القول ، " جعل هذا العمود 1/12 في كل نقطة توقف من هذه النقطة إلى الأمام حتى أقول لكم خلاف ذلك."

كما لديك 6 عناصر ، وأنا في الواقع جعلت كل 2 وحدات الشبكة كل أدناه.وهذا سوف يساعد قليلا مع كلمة التفاف في التسميات الخاصة بك في أصغر أجهزة العرض.

أتش تي أم أل:

<form id="addExpense" action="AddedExpense" method="post">
    <div class="expenseDetails">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-info">
                     <h4>Add Your Expenses <a href="#" id="add"><span class="glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Click to add new expense"></span></a></h4>

                </div>
            </div>
            <div class="panel-body">
                <div class="container">
                    <div class="row" id="0">
                        <div class="form-group col-xs-2">
                            <label>Expensed Type</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Amount</label>
                            <input type="text" class="form-control" name="expenseList[0].value" />
                        </div>
                        <div class="form-group col-xs-2 ">
                            <label>Date</label>
                            <input type="text " class="form-control" name="expenseList[0].dt " cssClass="dt " />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Desc</label>
                            <input type="text " class="form-control" name="expenseList[0].description " />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Receipt</label>
                            <input type="text " class="form-control" name="expenseList[0].img " />
                        </div>
                        <div class="form-group col-xs-2 cl ">
                            <label>Delete</label>
                            <img src="images/delete.png " class="delete " />
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 right">
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </div>
        </div>
    </div>
</form>

تحرير-شرح أفضل لفئات العقيد:

تسمح لك فئات الأعمدة بتحديد عدد وحدات الشبكة التي يجب أن يشغلها العمود.افتراضيا ، يمكن لكل صف عقد 12 وحدة الشبكة قبل أن التفاف إلى السطر التالي.

و شس ، سم ، مد ، و لغ جزء من فئة العقيد يتوافق مع نقطة توقف محددة.

بوتستراب 3 هو المحمول أولا ، لذلك إذا قمت بتحديد فئة كول في حجم شس ، تحتاج فقط إلى تحديد فئة كول أخرى إذا كنت تريد سلوك مختلف على شاشة أوسع.

على سبيل المثال ، إذا كنت تريد 6 وحدات الشبكة (وهو 2 أعمدة أو 50٪) لجميع الشاشات ولكنك تريد 3 وحدات الشبكة (وهو 4 أعمدة أو 25٪) على شاشات لغ (1200 بكسل+) ، وكنت أكتب: class="col-xs-6 col-lg-3".والنتيجة هي أنه على جميع الأجهزة التي تقل عن 1200 بكسل ، سيكون لديك 2 أعمدة وأي شيء يزيد عن 1200 بكسل سيكون 4 أعمدة.