Question

我在我的网站上使用Bootstrap3.0。

我的要求如下： -

您打开网站
您选择了Audiotorium
根据Auditorium选择，使用jQuery

现在假设您选择了Auditorium-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 ，我需要设置高度＆amp;容器明显的宽度所以我这样做。

$('#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

供参考： - 我在根元素

＆＃34; container-fluid＆＃34;

这是我的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

如果你正在使用引导框架，你应该使用响应功能，但是，参考你的评论，我发现你不想要响应。在这种情况下，请勿使用容器或bootstrap提供的列。

.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;
}

和css

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>')
})

我添加了类.r1 .r2 .r3，为您提供了一个更好地访问元素的示例。

更新

根据你的JSON添加像这样的数据

ID <- "english-premier-league-transfers"
URL <- paste0("http://www.soccernews.com/soccer-transfers/", ID)
parsed.html <- htmlParse(URL)

targetPoint <-"//div[@id='wrapper']/div[@id='page']/div[@id='container']/div[@id='content']/div[@class='league-transfers']/div[@class='panes']"
playersList <- xpathSApply(parsed.html, targetPoint , xmlValue)

在通过json数组添加数据的情况下，以空ul元素

开头

我该如何处理这个css-hack？

1 个答案: