我該如何解決這個CSS駭客問題？

Question

我正在為我的網站使用Bootstrap3.0。

我的要求是：-

1. 您打開網站
2. 您選擇Audiotorium
3. 根據所選的禮堂，使用jQuery繪制圖章布局

現在假設您選擇了A禮堂，它有25個席位

• 第一排15個座位
• 第二排7個座位
• 第三排3個座位

在CSS中，我給每一列的行寬為100px，使用jQuery查看上述布局配置，然后將容器的寬度設置為100 * 15（1500px）。

HTML

<div class="col-lg-12>
 <ul id="seatsContainer">
 </ul>
</div>

jQuery的

  $('#seatsContainer').append('<li style='position:absoulte;left:'+colIndex * 100px> SeatNumber</li>');

因為我為子li使用了position：absolute，所以我需要顯式設置容器的高度和寬度，所以我要這樣做。

$('#seatContainer').css('width',(maxCols*100)+"px");

但是它可以在md，lg設備上按需渲染，但是當我在xs或sm設備上查看時，溢出寬度被隱藏了。

我的問題是，在較小的邊框尺寸下應如何呈現水平滾動條。

CSS中的設置

html,body
{
 overflow:auto;
}

像redbus網站一樣，如果我選擇公共汽車，請尋找座位；如果我將屏幕最小化，則會出現水平滾動條。

https://www.redbus.in/Booking/SelectBus.aspx?fromCityId=130&toCityId=122&doj=12-Jan-2016&busType=Any&opId=0

僅供參考：-我在根元素上使用“容器流體”

這是我的JSON：-

 {
"SeatDetails": [{
    "seatId": 1021,
    "seatNumber": "A1",
    "rowIndex": 1,
    "colIndex": 1
}, {
    "seatId": 1022,
    "seatNumber": "A2",
    "rowIndex": 1,
    "colIndex": 2
}, {
    "seatId": 1023,
    "seatNumber": "A3",
    "rowIndex": 1,
    "colIndex": 3
}, {
    "seatId": 1024,
    "seatNumber": "A4",
    "rowIndex": 1,
    "colIndex": 4
}, {
    "seatId": 1025,
    "seatNumber": "A5",
    "seatPrice": 105,
    "rowIndex": 1,
    "colIndex": 5
}, {
    "seatId": 1026,
    "seatNumber": "B1",
    "rowIndex": 2,
    "colIndex": 1
}, {
    "seatId": 1027,
    "seatNumber": "B2",
    "rowIndex": 2,
    "colIndex": 2
}, {
    "seatId": 1028,
    "seatNumber": "B3",
    "rowIndex": 2,
    "colIndex": 3
}, {
    "seatId": 1029,
    "seatNumber": "B4",
    "rowIndex": 2,
    "colIndex": 4
}, {
    "seatId": 1030,
    "seatNumber": "B5",
    "rowIndex": 2,
    "colIndex": 5
}, {
    "seatId": 1031,
    "seatNumber": "C1",
    "rowIndex": 3,
    "colIndex": 1
}, {
    "seatId": 1051,
    "seatNumber": "C2",
    "rowIndex": 3,
    "colIndex": 2
}, {
    "seatId": 1032,
    "seatNumber": "C3",
    "rowIndex": 3,
    "colIndex": 5
}, {
    "seatId": 1033,
    "seatNumber": "C4",
    "rowIndex": 3,
    "colIndex": 6
}, {
    "seatId": 1034,
    "seatNumber": "C5",
    "rowIndex": 3,
    "colIndex": 8
}]
}

Answer 1

如果您使用的是自舉框架，則應使用響應功能，但是，參考您的評論，我看到您不希望響應。 在這種情況下，請勿使用引導程序提供的容器或列。

<div class="seatsWrapper">
    <ul class="seatsContainer r1">
        <li>A1</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
        <li>A5</li>
        <li>A6</li>
        <li>A7</li>
        <li>A8</li>
        <li>A9</li>
        <li>A10</li>
        <li>A11</li>
        <li>A12</li>
        <li>A13</li>
        <li>A14</li>
        <li>A15</li>
    </ul>       
    <ul class="seatsContainer r2">
        <li>B1</li>
        <li>B2</li>
        <li>B3</li>
        <li>B4</li>
        <li>B5</li>
        <li>B6</li>
        <li>B7</li>
    </ul>
    <ul class="seatsContainer r3">
        <li>C1</li>
        <li>C2</li>
        <li>C3</li>
    </ul>
</div>

和CSS

.seatsWrapper {
    overflow-x: scroll;
    min-width: 1500px;
}
ul.seatsContainer {
    list-style-type: none;
    clear: both;
    overflow-x: none;
}
ul.seatsContainer li {
    float: left;
    width: 100px;
    height: 100px;
}
ul.seatsContainer.r1 {
    color: blue;
}
ul.seatsContainer.r2 {
    color: red;
}
ul.seatsContainer.r3 {
    color: green;
}

我添加了.r1 .r2 .r3類，為您提供了一個更好地訪問元素的示例。

UPDATE

根據您的JSON添加這樣的數據

var data = JSON.parse('{"SeatDetails": [{ "seatId": 1021, "seatNumber": "A1", "rowIndex": 1, "colIndex": 1 }, { "seatId": 1022, "seatNumber": "A2", "rowIndex": 1, "colIndex": 2 }, { "seatId": 1023, "seatNumber": "A3", "rowIndex": 1, "colIndex": 3 }, { "seatId": 1024, "seatNumber": "A4", "rowIndex": 1, "colIndex": 4 }, { "seatId": 1025, "seatNumber": "A5", "seatPrice": 105, "rowIndex": 1, "colIndex": 5 }, { "seatId": 1026, "seatNumber": "B1", "rowIndex": 2, "colIndex": 1 }, { "seatId": 1027, "seatNumber": "B2", "rowIndex": 2, "colIndex": 2 }, { "seatId": 1028, "seatNumber": "B3", "rowIndex": 2, "colIndex": 3 }, { "seatId": 1029, "seatNumber": "B4", "rowIndex": 2, "colIndex": 4 }, { "seatId": 1030, "seatNumber": "B5", "rowIndex": 2, "colIndex": 5 }, { "seatId": 1031, "seatNumber": "C1", "rowIndex": 3, "colIndex": 1 }, { "seatId": 1051, "seatNumber": "C2", "rowIndex": 3, "colIndex": 2 }, { "seatId": 1032, "seatNumber": "C3", "rowIndex": 3, "colIndex": 5 }, { "seatId": 1033, "seatNumber": "C4", "rowIndex": 3, "colIndex": 6 }, { "seatId": 1034, "seatNumber": "C5", "rowIndex": 3, "colIndex": 8 }] }')

$.each(data.SeatDetails, function(k, v) {
    $('ul.seatsContainer.r'+v.rowIndex).append('<li>'+v.seatNumber+'</li>')
})

如果通過json數組添加數據，請從空ul元素開始