Как сделать так, чтобы ввод / текст занимал всю ширину div в Bootstrap 4? - PullRequest
0 голосов
/ 08 июня 2018

Я пытаюсь использовать bootstrap 4, у меня простой div содержит текстовое поле.Я хочу, чтобы текстовое поле принимало ширину div.Я думал, что в Bootstrap вход по умолчанию принимает полную ширину?

Что меня действительно беспокоит, так это то, что код работает правильно здесь во фрагменте ??

Вот пример кода:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
            <div class="col-md" style="background-color: blue;">
               <!-- this is the left side -->
               <input type="text" class="form-control" placeholder="Email address">
            </div>
            <div class="col-md" style="background-color: red;">
               <!-- this is the right side -->
            </div>
        </div>
</div>

Код выше - именно то, что у меня есть.Я не уверен, что это правильный способ сделать это?

Я не знаю, может ли это помочь, я использую этот код внутри представления (проект MVC).

Так чтоВот как это выглядит в Visual Studio:

Макет:

<div class="container">
    <div class="row">
        <div class="col-md">
            @RenderBody()
        </div>
        <div class="col-md d-none d-md-block">
           <!------>
        </div>
    </div>

    <footer>
        <p>&copy; @DateTime.Now.Year - My Project</p>
    </footer>
</div>

И это вид:

<input type="text" class="form-control" placeholder="Email address">

Вот как это выглядит при рендерингеview (есть другие CSS, связанные с цветом фона и т. д., которые я здесь не добавил) enter image description here

1 Ответ

0 голосов
/ 08 июня 2018

Столбцы имеют отступ 15 пикселей с обеих сторон.Чтобы удалить заполнение, вы можете ...

Использовать p-0 для padding:0 в столбце с вводом:

<div class="container">
        <div class="row">
            <div class="col-md p-0" style="background-color: blue;">
               <!-- this is the left side -->
               <input type="text" class="form-control" placeholder="Email address">
            </div>
            <div class="col-md" style="background-color: red;">
               <!-- this is the right side -->
            </div>
        </div>
</div>

Или вы можете использовать no-gutters для удаления заполнения извсе столбцы в row.Это также удалит отрицательные поля из строки, что приведет к выравниванию по сторонам области просмотра на меньших экранах ...

<div class="container">
        <div class="row no-gutters">
            <div class="col-md" style="background-color: blue;">
               <!-- this is the left side -->
               <input type="text" class="form-control" placeholder="Email address">
            </div>
            <div class="col-md" style="background-color: red;">
               <!-- this is the right side -->
            </div>
        </div>
</div>

Демо: https://www.codeply.com/go/d4AOm39YD3

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...