Bootstrap 3.. распределение столбцов не работает, как я ожидал .. Я не могу заставить кнопку охватить всю ширину

Question

Я пытаюсь иметь 2 строки: первая строка - 4 полосы, у которой есть метка с текстовым полем ниже. Вторая цифра 8 с меткой и текстовым полем ниже.

Затем 12 пролетов во втором ряду с кнопкой, охватывающей все это. Я добавил изображение того, как я хочу, чтобы он выглядел, и код, который я использую.

      <div class="row">
    <div class="col-md-4">
        <asp:Label runat="server" Text="Merchant:" Width="100%"></asp:Label>
        <asp:DropDownList ID="comMerchants" runat="server" Width="100%" AutoPostBack="true"/>
    </div>
    <div class="col-md-8>"
        <asp:Label runat="server" Text="Enter Pass Serial (GUID):" Width="100%"/>
        <asp:TextBox ID="txtGUID" runat="server" Width="100%"/>
    </div>
    <div class="col-md-12">
        <asp:Button ID="Button1" runat="server" Text="Button" width="100%"/>
    </div>

</div>

Answer 1

Вероятно, вы также захотите использовать загрузку для стилизации элементов формы, в противном случае вы просто боретесь с фреймворком.

Таким образом, вашей кнопке, вероятно, нужен класс btn, а затем btn-default (или аналогичный), вы можете использовать btn-block, чтобы он отображал блок, а не встроенный.

Это сделает его 100% шириной контейнера.

Если вы хотите действительно 100%, вам также нужно будет удалить отступы из содержащего столбца, что я не могу вспомнить, можете ли вы сделать в bootstrap3, но вы можете легко сделать это самостоятельно с помощью собственного CSS.

Как это

Главное здесь — классы btn, btn-default и btn-block на кнопке.

          <button type="Button" ID="Button1" class="btn btn-default btn-block">THIS IS A BUTTON</button>

в скрипте выше я преобразовал ваши элементы управления сервером в HTML, чтобы он правильно отображался в браузере, и я применил стиль к столбцу, кнопке и элементам div (сделал контур фиолетовым, чтобы их было легче увидеть).

Answer 2

Дело в том, что когда вы используете строку Bootstrap Grid, все в этой строке div будет, если возможно, расположено в одной строке.

ваша кнопка имеет класс col-md-12, что означает, что она будет занимать 12 столбцов для дисплеев, которые меньше или примерно того же размера, что и средний дисплей.

Если бы вы написали col-12, он использовал бы все 12 колонок на всех размерах экрана. но col-md-12 не будет. Ширина записи 100% делает одну вещь. Он использует то, что осталось от столбцов строки

Для лучшего понимания сетки начальной загрузки я рекомендую:

Создание адаптивного макета с помощью Bootstrap Grid.

Или ознакомьтесь с документацией самого Bootstrap. https://getbootstrap.com/docs/4.0/layout/grid/