Bootstrap 3 - 行修复问题
Bootstrap 3 - Row Fixed Issue
我正在为 Bootstrap 3 网格系统而苦苦挣扎。
让我解释一下我已经实现了什么,我需要什么以及我做了什么(失败尝试)来实现。
这是图像的布局 (HTML | Razor)。为您提供此 This is the site link 的实时版本,以便您可以观看和播放。
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<div id="showcaseSection" class="showcaseSection superVideo">
<ul class="media-list" id="showcaseMedia" itemscope itemtype="http://schema.org/UserComments"></ul>
</div>
<div class="hidden-xs">
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: @Model.Team1Name (<span id="team1Total">0</span>)</span>
</p>
<ul class="media-list team1ListShowCase" id="@Model.Team1Id" data-img="@Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team1Id})" data-media="media-left" data-team="@Model.Team1Name" data-class="team1"></ul>
</div>
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: @Model.Team2Name (<span id="team2Total">0</span>)</span>
</p>
<ul class="media-list team2ListShowCase" id="@Model.Team2Id" data-img="@Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team2Id})" data-media="media-right" data-team="@Model.Team2Name" data-class="team2"></ul>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6 nopadding">
<div id="chatcontainer">
<ul class="media-list" id="chatbody" itemscope itemtype="http://schema.org/UserComments"></ul>
<div id="chatOptions" class="collapse">
<p class="text-center">@Model.Title</p>
<button id="exitroom" class="btn btn-danger" title="Salir" disabled="disabled">
<span class="glyphicon glyphicon-log-out"></span> @Resources.Salir
</button>
<span>
<input type="checkbox" id="isAutoscroll" name="my-checkbox" checked>
<label>Actualizar Mensajes</label>
</span>
</div>
</div>
@if (!Model.IsReadOnly)
{
<div class="input-group">
<input type="hidden" style="display: none" class="form-control" aria-required="false" readonly id="inresponseto">
<textarea type="text" rows="2" class="form-control" required="required" aria-required="true" maxlength="500" placeholder="Comentario..." disabled="disabled" id="responseText"></textarea>
<input type="text" class="form-control" style="height: 25px;" aria-required="false" readonly id="inresponsetomessage">
<span class="input-group-btn">
<button id="sendresponse" type="button" title="Enviar" class="btn btn-primary" disabled="disabled">
<span class="glyphicon glyphicon-send"></span>
</button>
<button class="btn btn-info" data-toggle="collapse" title="Opciones" data-target="#chatOptions">
<span class="fa fa-cogs"></span>
</button>
</span>
</div>
}
</div>
</div>
如您所见,所有内容都排成一行。
我想在 XS(视口)上将 视频部分固定在顶部 和 用于评论的文本区域固定在底部。
我尝试将其添加到该行,但我修复了视频但看不到文本区域
.fixed2 {
position: fixed;
z-index: 10;
width: 100%;}
我不知道在 XS 中显示固定顶部(视频)和固定底部(聊天文本框)以及中间可滚动评论的其他方法。
欢迎任何帮助。
为 tablet/mobile 覆盖 #chatcontainer
的高度将解决此问题。示例:
@media(max-width: 767px) {
#chatcontainer{
height: calc(50vh - 80px);
}
}
我正在为 Bootstrap 3 网格系统而苦苦挣扎。 让我解释一下我已经实现了什么,我需要什么以及我做了什么(失败尝试)来实现。
这是图像的布局 (HTML | Razor)。为您提供此 This is the site link 的实时版本,以便您可以观看和播放。
<div class="row">
<div class="col-xs-12 col-md-6 nopadding">
<div id="showcaseSection" class="showcaseSection superVideo">
<ul class="media-list" id="showcaseMedia" itemscope itemtype="http://schema.org/UserComments"></ul>
</div>
<div class="hidden-xs">
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: @Model.Team1Name (<span id="team1Total">0</span>)</span>
</p>
<ul class="media-list team1ListShowCase" id="@Model.Team1Id" data-img="@Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team1Id})" data-media="media-left" data-team="@Model.Team1Name" data-class="team1"></ul>
</div>
<div class="col-xs-6 nopadding">
<p class="text-center no-margin" style="margin-top: 15px;">
<span>Equipo: @Model.Team2Name (<span id="team2Total">0</span>)</span>
</p>
<ul class="media-list team2ListShowCase" id="@Model.Team2Id" data-img="@Url.Action("GetLinkToImageTeam", "Home", new {Id = Model.Team2Id})" data-media="media-right" data-team="@Model.Team2Name" data-class="team2"></ul>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-6 nopadding">
<div id="chatcontainer">
<ul class="media-list" id="chatbody" itemscope itemtype="http://schema.org/UserComments"></ul>
<div id="chatOptions" class="collapse">
<p class="text-center">@Model.Title</p>
<button id="exitroom" class="btn btn-danger" title="Salir" disabled="disabled">
<span class="glyphicon glyphicon-log-out"></span> @Resources.Salir
</button>
<span>
<input type="checkbox" id="isAutoscroll" name="my-checkbox" checked>
<label>Actualizar Mensajes</label>
</span>
</div>
</div>
@if (!Model.IsReadOnly)
{
<div class="input-group">
<input type="hidden" style="display: none" class="form-control" aria-required="false" readonly id="inresponseto">
<textarea type="text" rows="2" class="form-control" required="required" aria-required="true" maxlength="500" placeholder="Comentario..." disabled="disabled" id="responseText"></textarea>
<input type="text" class="form-control" style="height: 25px;" aria-required="false" readonly id="inresponsetomessage">
<span class="input-group-btn">
<button id="sendresponse" type="button" title="Enviar" class="btn btn-primary" disabled="disabled">
<span class="glyphicon glyphicon-send"></span>
</button>
<button class="btn btn-info" data-toggle="collapse" title="Opciones" data-target="#chatOptions">
<span class="fa fa-cogs"></span>
</button>
</span>
</div>
}
</div>
</div>
如您所见,所有内容都排成一行。 我想在 XS(视口)上将 视频部分固定在顶部 和 用于评论的文本区域固定在底部。
我尝试将其添加到该行,但我修复了视频但看不到文本区域
.fixed2 {
position: fixed;
z-index: 10;
width: 100%;}
我不知道在 XS 中显示固定顶部(视频)和固定底部(聊天文本框)以及中间可滚动评论的其他方法。
欢迎任何帮助。
为 tablet/mobile 覆盖 #chatcontainer
的高度将解决此问题。示例:
@media(max-width: 767px) {
#chatcontainer{
height: calc(50vh - 80px);
}
}