Jquery UI 模式在文本输入上具有右边距答案

【问题标题】：Jquery UI modal with right margin on text inputJquery UI 模式在文本输入上具有右边距
【发布时间】：2018-05-08 17:02:54
【问题描述】：

我正在尝试摆脱这些边距，但我正在努力寻找如何以及在何处更改它。我试图覆盖 jquery 和引导 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>

【问题讨论】：

你想要没有边距的权利
首先，还要发布 CSS。其次，您可以使用检查工具查看margins/padding 的确切来源。
您使用的是 bootstrap4 还是 bootstrap3？
对不起，伙计们，我想通了——这是引导列边距，而不是元素。我使用了行无排水沟类。

标签： jquery html css jquery-ui

【解决方案1】：

对于 v4，您只需将 no-gutters 类应用于您的 .row 元素。还有一些小的样式细节，例如<input>border-radius 或将焦点输入放在前面：

@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>

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

【讨论】：

Andrei 你能告诉我更多细节吗？哪些未闭合的标签？
@rafa：你所有的<label>s 要么没有开始，要么没有完成，除了第二个，它完全丢失了。将您的“定义”粘贴到我链接的验证器中，它会告诉您。顺便说一句，你为什么称它为“定义”？这是标记。

【解决方案2】：

Niether Bootstrap 3 或 4 有一个 .text 类，所以要么这是你自己创建的类，要么它实际上什么也没做。

在我看来，您看到的空间可能是每列的“排水沟”。 Bootstrap 列的左右填充默认为 15px，因此在两列之间创建了 30px 的空间。

话虽如此，您有三个选择：

1.覆盖列的填充，看看这是否能解决您的问题。

    [class^="col"] {
        padding: 0
    }

如果此解决方案有效，您可以更具体地仅选择这些列，仅将其应用于这些字段。

2。将这些字段放在一个单独的列中并自己分隔它们

由于这些字段不一定需要位于它们自己的列中，因此您可以尝试使用 col-*-12 并自行分隔它们。这将消除列之间的默认填充。

3.将 no-gutter 类应用于该行，看看它是否能解决您的问题。

【讨论】：

【解决方案3】：

对不起，伙计们，我想通了——这是引导列边距，而不是元素。我使用了行无排水沟类

【讨论】：