Bootstrap текстовое поле (ввод) во всю ширину не работает внутри формы - PullRequest
Новая
       5

Bootstrap текстовое поле (ввод) во всю ширину не работает внутри формы

0 голосов
/ 06 апреля 2020

Я использую bootstrap 3.4.1, и я пытаюсь расширить текстовое поле (входные данные), заполненные до полной ширины внутри формы, и я использую bootstrap столбцы системы сетки, чтобы сделать это, но кажется, что это не работает .. проблема в том, что когда я даю col-md-12 , тогда столбец сам принимает всю ширину, но текстовое поле не .. когда я ставлю style = "max-width = 100%" внутри текстового поля, тогда он занимает полную ширину, но не реагирует .. любая помощь очень ценится. Я приложил несколько фотографий.

мой код: 

<div class="row" style="border: 5px solid red;">
<div class="col-sm-12" style="border: 5px solid green;">
    <div class="form-group">
        <label for="AssetTagId" class="control-label">Asset Tag Id1</label>
        <div>
            <input type="text" class="form-control" name="AssetTagId" id="AssetTagId" ng-model="asset.AssetTagId" ng-maxlength="32" required style="border: 5px solid pink;"/> <!--style="max-width: 100%"-->
            <span class="text-danger" ng-show="(frmAddAsset.AssetTagId.$touched || frmAddAsset.AssetTagId.$dirty) && frmAddAsset.AssetTagId.$invalid">
                <span ng-show="frmAddAsset.AssetTagId.$error.required">AssetTagId is required</span>
                <span ng-show="frmAddAsset.AssetTagId.$error.maxlength">AssetTagId must be less than or equal to 32</span>
            </span>
        </div>
    </div>
</div>

Интерфейс

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020 
<div class="row">
    <div class="col-md-12">
        <form asp-action="Create" method="post" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="PageTitle" class="control-label"></label>
                <input asp-for="PageTitle" class="form-control" />
                <span asp-validation-for="PageTitle" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>
<div class="panel-footer">
    <div class="form-group">
        <a asp-action="Index">Back to List</a>
    </div>
</div>
0 голосов
/ 06 апреля 2020

style="width:100%" в текстовом поле. 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div class="container">
  <form class="form-inline">
    <div class="row" style="border: 5px solid red;">
      <div class="col-md-12" style="border: 5px solid green;">
        <div class="form-group">
          <label for="AssetTagId" class="control-label">Asset Tag Id1</label>
          <div>
            <input type="text" class="form-control" name="AssetTagId" id="AssetTagId" ng-model="asset.AssetTagId" ng-maxlength="32" required style="border: 5px solid pink; width:100% !important;" />
            <!--style="max-width: 100%"-->
            <span class="text-danger" ng-show="(frmAddAsset.AssetTagId.$touched || frmAddAsset.AssetTagId.$dirty) && frmAddAsset.AssetTagId.$invalid">
                  <span ng-show="frmAddAsset.AssetTagId.$error.required">AssetTagId is required</span>
            <span ng-show="frmAddAsset.AssetTagId.$error.maxlength">AssetTagId must be less than or equal to 32</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
...