程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

希望我的内容对引导程序有响应,但它不“工作”

发布于2022-12-07 03:31     阅读(707)     评论(0)     点赞(10)     收藏(1)


我有一个页面,其中布局以一个简单的文本开始,在它下面的一个框中有另一个文本,我自己用 css 制作的。在它的右边,我有一个幻灯片,我从一个网站上截取的,它与框中的文本很好地对齐。那是我的布局,使用 bootstrap 时它并没有真正“工作”。我希望内容在分辨率较低时向下移动,但它确实效果不佳。我尝试使用 col-xs-6 和其他示例,但它并没有真正起作用。我实际上不确定这是否有意义,但我想要的是让我的所有内容都能响应并对当前页面大小的大小做出反应,并以垂直向下或类似的形式进行调整。

这是我的代码,我有很多“文本中的 fillercode 对于大混乱来说很抱歉:/”

<div class="TimmageH1">Serien utspelar sig på den fiktiva kontinenten Västeros, ofta kallad "De sju kungarikena". Eddard "Ned" Stark (Sean Bean), lord av Vinterfell, bekymras av rykten från muren i norr då han får besked om att Jon Arryn, hans mentor och kungens hand, dött av feber och att kung Robert Baratheon (Mark Addy) är på väg till Winterfell. Ned blir tillfrågad om att ersätta Arryn som kungens hand och reser till Kungshamn för att assistera kungen. Familjen Stark delas då upp genom att Ned och döttrarna Arya och Sansa åker till Kungshamn. Kvar i Vinterhed är Catelyn och hennes söner. Jon Snow, Neds oäkting som är illa omtyckt av Catelyn, beger sig till muren i norr för att bli en edsvuren man i Nattväktarna, den traditionstyngda vaktstyrka som försvarar muren som separerar den avlägsna norden. På andra sidan havet på kontinenten Essos smider exilprinsen Viserys Targaryen (Harry Lloyd) planer för att återerövra De sju kungarikena. Han gifter bort sin yngre syster Daenerys till stamkungen Khal Drogo. Daenerys blir senare en av huvudkaraktärerna då hon också har planer på att sitta på järntronen. Andra pretendenter är Roberts yngre bröder Stannis och Renly, som ser sig som Roberts legitima arvtagare. I norr gör Neds äldste son Robb anspråk på att vara "kungen i Norr" och på Järnöarna utropar sig lord Balon till kung av Järnöarna.</div>

<div class="GreyBG"><div class="Patchnotes"><h2>Patch Notes (Elr slideshow/liknande)</h2></div><div class="TimmageH2">Serien utspelar sig på den fiktiva kontinenten Västeros, ofta kallad "De sju kungarikena". Eddard "Ned" Stark (Sean Bean), lord av Vinterfell, bekymras av rykten från muren i norr då han får besked om att Jon Arryn, hans mentor och kungens hand, dött av feber och att kung Robert Baratheon (Mark Addy) är på väg till Winterfell. Ned blir tillfrågad om att ersätta Arryn som kungens hand och reser till Kungshamn för att assistera kungen. Familjen Stark delas då upp genom att Ned och döttrarna Arya och Sansa åker till Kungshamn. Kvar i Vinterhed är Catelyn och hennes söner. Jon Snow, Neds oäkting som är illa omtyckt av Catelyn, beger sig till muren i norr för att bli en edsvuren man i Nattväktarna, den traditionstyngda vaktstyrka som försvarar muren som separerar den avlägsna norden. På andra sidan havet på kontinenten Essos smider exilprinsen Viserys Targaryen (Harry Lloyd) planer för att återerövra De sju kungarikena. Han gifter bort sin yngre syster Daenerys till stamkungen Khal Drogo. Daenerys blir senare en av huvudkaraktärerna då hon också har planer på att sitta på järntronen. Andra pretendenter är Roberts yngre bröder Stannis och Renly, som ser sig som Roberts legitima arvtagare. I norr gör Neds äldste son Robb anspråk på att vara "kungen i Norr" och på Järnöarna utropar sig lord Balon till kung av Järnöarna.</div></div> 

<!-- Här börjar script länkning till bootstrap, modal och främst slideshowen. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/modal.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jssor.slider.mini.js"></script>
<!-- Här slutar script länkning till bootstrap, modal och främst slideshowen. -->

  <div class="SlideshowPosition">
<!-- use jssor.slider.debug.js instead for debug -->

解决方案


Bootstrap 使用网格系统使内容响应。这意味着您应该始终将您的内容放在一行中,并在列中的行内。当内容变得大到屏幕尺寸无法并排放置时,它们将被放置在彼此下方。

例子:

<div class="row">
    <div class="col-md-6">
        <p>Left-side of the page</p>
    </div>
    <div class="col-md-6">
        <p>Right-side of the page</p>
    </div>
</div>

如果您希望内容仅堆叠在非常小的设备上,您可以使用 xs,如果您希望它堆叠在“中等”屏幕尺寸以下的任何设备上,您可以使用 md,等等。

我还建议您在这里阅读它:http: //getbootstrap.com/css/#grid




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/461999/feefd7ec9fcb026a62aa/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)