Welcome to اسکریپتستان

برای استفاده از تمامی امکانات، ثبت نام کنید. یکبار ثبت نام کنید و وارد شوید، سپس خواهید توانست مطالب خود را ارسال کنید به مطالب دیگر کاربران پاسخ دهید، امتیاز دریافت کنید، پیام خصوصی ارسال کنید و ..

Scriptestan

آموزش Form Row و حذف Padding ستون در بوتسترپ 3 برای فرم ها

1 ارسال در این موضوع قرار دارد

درود

در بوتسترپ 4 کلاسی به نام form-row اضافه شده که پدینگ ستون ها را کم میکند تا به کامپونت های فورم شما جلوه ی بهتری دهد . نمونه:

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

لینک رفرنس:

https://getbootstrap.com/docs/4.0/components/forms/#form-row

این کلاس در بوتسترپ 3 وجود نداشت که با این کلاس میتونید این قابلیت رو به بوتسترپ 3 هم اضافه کنید:

@media only screen and (min-width : 768px) {

  .my-form-col > div {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .my-form-col > div:first-child{
    padding-left: 0 !important;
  }
  .my-form-col > div:last-child{
    padding-right: 0 !important;
  }
}
<div class="container">
        <h1>With Awesome Padding</h1>
        <form class="form-horizontal">
            <div class="form-group my-form-col">
                <div class="col-sm-2">
                    <select class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group my-form-col">
                <div class="col-sm-4">
                    <input type="text" class="form-control" placeholder="test">
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" placeholder="test">
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" placeholder="test">
                </div>
            </div>
        </form>


        <h1>Original Column</h1>
        <form class="form-horizontal">
            <div class="form-group ">
                <div class="col-sm-2">
                    <select class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group ">
                <div class="col-sm-4">
                    <input type="text" class="form-control" placeholder="test">
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" placeholder="test">
                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control" placeholder="test">
                </div>
            </div>
        </form>
</div>

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری