时间戳

首页 > 解决方案 > Jquery UI 模式在文本输入上具有右边距

jquery - Jquery UI 模式在文本输入上具有右边距

问题描述

我正在尝试摆脱这些边距，但我正在努力寻找如何以及在何处更改它。我试图覆盖 jquery 和 bootstrap css，但没有运气（正在玩 0 边距）。应用该边距的类是“文本”类-如果我删除它，则没有边距，但其余格式也消失了，这对我不利。欢迎任何提示

在此处输入图像描述

这是我的定义：

 <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4">    

                Street</label>
            <input type="text" name="CompanyStreet" id="CompanyStreet" value="" class="text ui-widget-content ui-corner-all"/>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3">


            <input type="text" name="PostCode" id="PostCode" value="" class="text ui-widget-content ui-corner-all"/>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3">
            <label for="CompanyCity">

            <input type="text" name="CompanyCity" id="CompanyCity" value="" class="text ui-widget-content ui-corner-all"/>  
            </div>

            <div class="col-lg-2 col-md-2 col-sm-2">
            <label for="CompanyCountry">

            <input type="text" name="CompanyCountry" id="CompanyCountry" value="" class="text ui-widget-content ui-corner-all"/> 
            </div> 
        </div>

标签： jqueryhtmlcssjquery-ui

解决方案

对于 v4，您需要做的就是将no-gutters类应用于您的.row元素。还有一些小的样式细节，例如<input>边界半径或将焦点输入放在前面：

@media (min-width: 576px) {
  .my-row input {
    border-radius: 0;
    width: calc(100% + 1px);
  }
  .my-row input:focus {
    position: relative;
    z-index: 1;
  }
  .my-row .form-group:first-child input {
    border-radius: .25rem 0 0 .25rem;
  }
  .my-row .form-group:last-child input {
    border-radius: 0 .25rem .25rem 0;
    width: 100%;
  }
  .my-row label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row no-gutters my-row">
        <div class="col-sm-4 form-group">
            <label for="CompanyStreet">Street</label>
            <input type="text" name="CompanyStreet" id="CompanyStreet"
            value="" class="form-control">
        </div>
        <div class="col-sm-3 form-group">
            <label for="PostCode">Post Code</label>
            <input type="text" name="PostCode" id="PostCode" value=""
            class="form-control">
        </div>
        <div class="col-sm-3 form-group">
            <label for="CompanyCity">Company City</label>
            <input type="text" name="CompanyCity" id="CompanyCity"
            value="" class="form-control">
        </div>
        <div class="col-sm-2 form-group">
            <label for="CompanyCountry">Company Country</label>
            <input type="text" name="CompanyCountry" id="CompanyCountry"
            value="" class="form-control">
        </div>
    </div>
</div>

同样的事情，对于 v3：

@media (min-width: 768px) {
  .my-row > .form-group {
    padding: 0;
  }
  .my-row > .form-group label {
    cursor: pointer;
  }
  .my-row > .form-group input {
    border-radius: 0;
    width: calc(100% + 1px);
  }
  .my-row > .form-group input:focus {
    position: relative;
    z-index:1;
  }
  .my-row > .form-group:first-child {
    padding-left: 15px;
  }
  .my-row > .form-group:first-child input {
    border-radius: 4px 0 0 4px;
  }
  .my-row > .form-group:last-child {
    padding-right: 15px;
  }
  .my-row > .form-group:last-child input {
    border-radius: 0 4px 4px 0;
    width: 100%;
  }
  .form-group label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row my-row">
    <div class="col-sm-4 form-group">
      <label for="CompanyStreet">Street</label>
      <input type="text" name="CompanyStreet" id="CompanyStreet" value="" class="form-control">
    </div>
    <div class="col-sm-3 form-group">
      <label for="PostCode">Post Code</label>
      <input type="text" name="PostCode" id="PostCode" value="" class="form-control">
    </div>
    <div class="col-sm-3 form-group">
      <label for="CompanyCity">Company City</label>
      <input type="text" name="CompanyCity" id="CompanyCity" value="" class="form-control">
    </div>
    <div class="col-sm-2 form-group">
      <label for="CompanyCountry">Company Country</label>
      <input type="text" name="CompanyCountry" id="CompanyCountry" value="" class="form-control">
    </div>
  </div>
</div>

旁注：您的标记无效，它有很多未闭合的标签。您可能希望通过验证器运行它。

推荐阅读