텍스트 상자와 버튼이 다른 화면에서 레이아웃이 아닌 것처럼 보이는 이유는 무엇입니까?

질문

 

내 페이지, 특히 텍스트 상자와 버튼 부분이 랩톱이나 PC와 다른 화면에서 제대로 표시되지 않는 이유는 무엇입니까?

태블릿 또는 40 인치 화면에서 순서가 잘못되었습니다. 모든 유형에서 유지 관리하는 방법

부트스트랩 등과 일부 사용자 정의 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%;
}

 

답변1

 

내가 알듯이 그리드 레이아웃에 올바르게 배치 된 div로 버튼을 둘러싸면됩니다.

<div class="col-sm-2 col-sm-pull-4">
   <button type="button" onclick="selectService()" class="btn btn-primary pull-right searchButton">Save</button>
</div>

버튼은 그리드 레이아웃에 사용되는 컨테이너에 없으므로 적절히 배치되지 않았으며 부트스트랩에 정의 된 최상위 레이아웃을 사용하지 않았습니다.

레이아웃에서 실제로 얻지 못하는 다른 것들이 있습니다. 나는 당신에게 다른 것들을 제안할 것입니다. 이 plukr에 통합했습니다. 한번 봐주세요. 궁금한 점이 있으시면 언제든지 의견을 작성해주세요.
https://embed.plnkr.co/Q9qRsq7PdbsOjyMD2dXB/

부트스트랩 문서를 살펴 봐야 할 수도 있습니다. 그리드 레이아웃에 따라 많은 질문을 명확하게해야합니다.
https://getbootstrap.com/docs/4.0/layout/grid/

그리드-레이아웃에서 열을 배치하는 데 사용되는 일부 class는 Bootstrap 4 릴리스와 함께 변경되거나 확장되었습니다. 부트 스트랩 3과 같은 이전 버전을 사용하는 경우 해당 문서를 살펴보십시오.
https://getbootstrap.com/docs/3.3/

 

 

 

 

 

출처 : https://stackoverflow.com/questions/50189860/why-does-the-textbox-and-button-looks-out-of-layout-on-different-screens