Jquery UI模式，文本输入右边距

Question

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

Answer 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运行它。

Answer 2

Niether Bootstrap 3或4有一个.text类，所以这是你自己创建的一个类，或者它实际上没有做任何事情。

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

据说有三种选择：

<强> 1。覆盖列的填充，看看这是否可以解决您的问题。

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

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

<强> 2。将这些字段放在一个列中并自行分隔

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

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

Answer 3

抱歉，我认为这是 - 这是引导列边距而不是元素。我使用了row no-gutter class