bootstrap 4.0.0上的输入字段全宽不起作用

Question

我Bootstrap 4.0.0对于列col-md-6

列的输入字段全宽有问题

这是我的代码。我只是试着修正全宽！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6 col-sm-6">

    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
  </div>

  <div class="col-md-6 col-sm-6">
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>

    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
        <input type="text" class="form-control">
      </span>
    </div>
  </div>
</div>

这是预期的输出！如果有任何关于输出的标记建议，请帮助我

提前致谢

Answer 1

基本上，每个span中都有两个col-6个元素。其中一个应该有一个固定的大小，另一个（包含输入）应该填充空间的其余部分

基本上，我使用flex来做到这一点。 socialMedia用于使父元素使用弹性框模型。

kb-icon设置为不增长或缩小，而kb-input设置为增长，这意味着它将占用每个col-6项目的剩余空间

我还将跨度更改为div，因为（至少在输入中）您希望项目具有不基于元素内容的特定大小。添加display: inline-block或display: block可以实现同样目的。

.socialMedia {
  display: flex;
  padding: 2px 0;
}

.kb-icon {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0 5px;
  /* just to make the icon centered */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* this item will act as a pseudo input element
   we do that because we can't put a button inside
   an actual input */

.kb-input {
  flex-grow: 1;
  /* I use flex to make the input as
  large as possible without setting sized myself */
  display: flex;
  margin-right: 5px;
  /* just to make it look better on small screens */
  border: 1px solid grey;
  /* imitate the input look */
}


/* this is used to create a focus effect on the fake input. if we use focus and not focus-within, nothing will happen. I use the same method bootstrap uses here */

.kb-input:focus-within {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

.kb-input input {
  /* remove the input style to make it "transparent" */
  border: 0;
  border-radius: 0;
  /* this is used to make sure it takes up the entire space */
  flex-grow: 1;
}


/* make sure input does not have style on focus */

.kb-input input:focus {
  outline: none;
  box-shadow: none;
}


/* make the button transparent */

button.kb-close {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="row">
  <div class="col-md-6 col-sm-6">

    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>

  </div>

  <div class="col-md-6 col-sm-6">
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>

    </div>
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>
    <div class="socialMedia d-flex">
      <div class="kb-icon"><img src="https://i.imgur.com/tyO9m6X.png" alt=""></div>
      <div class="kb-input">
        <input type="text" class="form-control ">
        <button class="kb-close">
        <i class="material-icons">close</i>
        </button>
      </div>
    </div>

  </div>
</div>

我还在CSS中添加了一些注释来解释为什么我做了我做的添加“干净输入”按钮

基本上，.kb-input用作伪输入元素（包含实际输入和按钮）。有关详细信息，请查看css。

如果要完全删除大纲，请不要应用focus-within伪类，并确保在要禁用它的元素上设置以下属性：

outline: 0;
box-shadow: 0;

Answer 2

您可以使用.form-group

来使用以下内容

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
  </div>

  <div class="col-md-6 col-sm-6">
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
    <div class="socialMedia form-group row">
      <label for="inputEmail3" class="col-1 col-form-label">
        <img src="https://i.imgur.com/tyO9m6X.png" alt="">
      </label>
      <div class="col-sm-10">
        <input type="text" class="form-control ">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果你想以此为中心，请阅读有关抵消的内容：

https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

我的主张：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-3 col-sm-3 offset-sm-3 offset-md-3 col-offset-3">

    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control ">
                  </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>
    </div>

  </div>

  <div class="col-md-3 col-sm-3">
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>

    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>
    </div>
    <div class="socialMedia d-flex">
      <span><img src="https://i.imgur.com/tyO9m6X.png" alt=""></span>
      <span>
                    <input type="text" class="form-control">
                  </span>
    </div>

  </div>
</div>