Question

为什么我的页面特别是文本框和按钮部分在不同于笔记本电脑或个人电脑的屏幕上看起来不合适？

在平板电脑或40英寸屏幕上出现故障。如何在所有类型中维护它？

我使用了bootstrap等和一些自定义css，但文本框和按钮部分仍然没有用。

<div id="appointments" class="appointment-main-block appointment-two-main-block">
    <div class="container">
        <div class="row topheaderMargin">
            <div class="section text-center">
                <h3 class="section-heading text-center">Select Services</h3>
            </div>

            <div class="col-md-8 col-sm-12" style="width: 100% !important">
                <div class="appointment-block">

                    <h5 class="form-heading-title"><span class="form-heading-no">1.</span>Services</h5>
                    <div class="row">

                        @using (Html.BeginForm())
                        {
                            <div class="col-sm-6">
                                @*<input type="text" class="form-control date-pick searchBox" id="appointment-date" placeholder="Appointment Date">*@
                                @Html.EditorFor(Model => Model.Booking_ID, new { htmlAttributes = new { @class = "form-control searchBox", placeholder = "Booking ID" } })
                                @Html.ValidationMessageFor(Model => Model.Booking_ID, "", new { @class = "ErrorMessages searchBox" })
                            </div>
                            <button type="button" onclick="selectService()" class="btn btn-primary pull-right searchButton">Save</button>
                        }

                    </div>
                    <div class="table-responsive">
                        <table id="tblServices" class="table table-condensed table-responsive tableBody">

                            <thead>
                                <tr>

                                    <th>S.No</th>
                                    <th>Service Name</th>
                                    <th>Service Price</th>

                                </tr>
                            </thead>
                            <tbody id="tbodytblServices"></tbody>

                        </table>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

更新

自定义CSS：

.ErrorMessages {
    font-size: small;
    color: tomato;
}

.fa-Icons-Padding {
    padding-top: 33px;
}

.MessageStrip {
    background-color: #0891ff !important;
    color: white !important;
    text-align: center !important;
    font-family: arial !important;
    font-weight: bold !important;
}

.Container-IndexPage {
    padding-right: 0%;
    padding-left: 0%;
}

.topBar {
    background-color: #F4F4F4 !important;
}

.searchBox {
    margin-left: 73%;
    width: 60% !important;
    border-color: lightgrey !important;
}

.searchButton {
    margin-right: 29%;
}

.searchButton {
    margin-right: 28.7%
}

.AddServicesSearchButton 
{
    margin-right: 7.7%;
    margin-top: -8%;
}

.datatable-headerrow {
    background-color: #F4F4F4 !important;
}

.pagination-buttons {
    background: linear-gradient(to bottom, #0891FF 0%, #0891FF 100%) !important;
    color: white !important;
}

.searchbox-border {
    border-color: lightgrey !important;
}

.tableBody {
    font-size: 16px !important;
    font-family: calibri !important;

}

.btnCheckIn {
    margin-right: 61%;
    margin-top: 1%;
}

.btnEdit {
    color: #fff !important;
    background-color: #0891FF !important;
    /*margin-right: -670%;
margin-top: -25%;*/
}

.btnBill 
{

    margin-right: 4%;
    margin-top: -18%;
    background-color: #03C04A;
}

.btnCancel {
    color: #fff !important;
    background-color: tomato !important;
    margin-right: 27%;
    margin-top: -18%;
}

.searchButtonConfirmationCancellation {
    margin-right: 28.7%;
}

.addCustomerBtn {
    margin-left: 376%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.printDiv {
    text-align: center;
    margin-bottom: 1.5%;
}

.pad-container {
    padding-top: 0% !important;
}

.table-header {
    font-size: 81%;
    font-family: arial;
}

.specialh3 
{
    text-align: center;
    text-transform: capitalize;
}

.selectColumn 
{
    margin: 11px -13px 14px !important;
}

.InvoiceTable 
{
    width: 50%;
    margin-left: 25%;
    margin-top: 1%;
    border: 1px gray dashed;
}
.Copies 
{
    margin-left: 46%;
    margin-top: 1% !important;
    font-size: 11px !important;

}

.topheaderMargin 
{
    margin-top: -5%;
}

Answer 1

在我看来，你只需要用一个正确放置在网格布局中的div来包围你的按钮。

# -*- mode: python -*-

block_cipher = None
a = Analysis(['coco.py'],
             pathex=['C:\\Python27\\Lib\\site-packages\\',
                     'C:\\Python27\\Lib\\site-packages\\sqlalchemy\\connectors\\',
                     'C:\\Python27\\Lib\\site-packages\\clidriver\\',
                     'C:\\Python27\\Lib\\site-packages\\ibm_db_dlls',
                     'C:\\Python27\\Lib\\site-packages\\ibm_db_sa',
                     'C:\\Python27\\Lib\\site-packages\\ibm_db.py'
                     ],
             binaries = [],
             datas=[],
             hiddenimports=['pymssql',
                            'pymysql',
                            'pyodbc',
                            'ibm_db_sa',
                            '_mssql',
                            'pkg_resources',
                            'sqlalchemy',
                            'ibm_db',
                            'ibm_db_dlls',
                            'clidriver'
                             ],
             hookspath=[],
             runtime_hooks=[],
             excludes=[],
             win_no_prefer_redirects=False,
             win_private_assemblies=False,
             cipher=block_cipher)
pyz = PYZ(a.pure, a.zipped_data,
             cipher=block_cipher)
exe = EXE(pyz,
          a.scripts,
          a.binaries,
          a.zipfiles,
          a.datas,
          name='ConsultingConnector',
          debug=False,
          strip=False,
          upx=True,
          console=True,
          icon='coco_icon.ico')

该按钮不在网格布局使用的容器中，因此没有相应放置，也没有使用bootstrap中定义的任何顶级布局。

我的布局中并没有真正有不同的东西。我会建议你不同的东西。我把它们整合在这个吸管中。请接受它。如果您有任何疑问，请随时写评论 https://embed.plnkr.co/Q9qRsq7PdbsOjyMD2dXB/

也许你需要看一下bootstrap文档。它应该根据网格布局澄清许多问题：
https://getbootstrap.com/docs/4.0/layout/grid/

请注意，用于在网格布局中定位cols的一些类已随着Bootstrap 4的发布而改变或扩展。如果您使用的是像bootstrap 3这样的旧版本，请查看相应的文档。
https://getbootstrap.com/docs/3.3/

为什么文本框和按钮看起来不同于不同屏幕上的布局？

1 个答案: