如果螢屏低于750像素（引導程式），如何制作div最大寬度？

在此處輸入影像描述

在此處輸入影像描述 我制作了 2 個 div（請參見螢屏截圖）。如果螢屏尺寸低于 750 像素，我想讓兩個 div 都設定為最大寬度，這樣看起來會更好。這是div的代碼。

<div class="col-md-6">
            <div style="width: 45%; height: 225px;" class="kt-portlet float-left">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">Wallet</h3>
                    </div>
                </div>
                <div class="kt-portlet__body">
                    <div class="table-responsive">
                        <table class="table table-borderless" style="font-weight: normal; margin-bottom: 0;">
                            <tr>
                                <th width="50%">Balance</th>
                                <td>&euro; {{ customer.balance | price }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>


<div class="kt-portlet w-75 float-right">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">Wallet Transactions</h3>
                    <div class="row ml-3">
                        <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" class="btn btn-label btn-label-brand"><i class="fa fa-plus-circle"></i>Add Credit</a>
                    </div>
                    <div class="row ml-3">
                        <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" class="btn btn-label-danger btn-label-brand"><i class="fa fa-minus-circle"></i>Remove Credit</a>
                    </div>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-group">
                        <div class="input-group">
                            <input type="search" class="form-control form-control-sm" placeholder="Search"
                                   aria-controls="ticketsTable" id="search">
                        </div>
                    </div>
                </div>
            </div>

在此處輸入影像描述

uj5u.com熱心網友回復：

稍微改變你的 html 并利用引導程式，洗掉浮動，使用 col 類

<div class="row">
    <div style=" height: 225px;" class="col-md-6 kt-portlet ">
      <div class="kt-portlet__head">
        <div class="kt-portlet__head-label">
          <h3 class="kt-portlet__head-title">Wallet</h3>
        </div>
      </div>
      <div class="kt-portlet__body">
        <div class="table-responsive">
          <table class="table table-borderless" style="font-weight: normal; margin-bottom: 0;">
            <tr>
              <th width="50%">Balance</th>
              <td>&euro; {{ customer.balance | price }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="kt-portlet col-md-6">
      <div class="kt-portlet__head">
        <div class="kt-portlet__head-label">
          <h3 class="kt-portlet__head-title">Wallet Transactions</h3>
          <div class="row ml-3">
              <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" class="btn btn-label btn-label-brand"><i class="fa fa-plus-circle"></i>Add Credit</a>
          </div>
          <div class="row ml-3">
              <a href="{{ path('admin_ticket_create', {'customer': customer.id}) }}" class="btn btn-label-danger btn-label-brand"><i class="fa fa-minus-circle"></i>Remove Credit</a>
          </div>
        </div>
        <div class="kt-portlet__head-toolbar">
          <div class="kt-portlet__head-group">
            <div class="input-group">
              <input type="search" class="form-control form-control-sm" placeholder="Search"
                      aria-controls="ticketsTable" id="search"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

標籤：html css

上一篇：將橙色框和文本對齊到影像的右側

下一篇：C# 模式匹配完全指南