Question

我有一个页面，其中布局以简单的文本开头，在其下面有一个框中的另一个文本，我自己只是在css中。在右侧，我有一个幻灯片，我从一个与盒子里的文字排好的网站上。这是我的布局，当使用bootstrap时，它并不真正＆＃34;工作＆＃34;。我希望内容在具有较低分辨率时向下移动，并且它确实无法正常工作。我尝试使用col-xs-6和其他示例，但它没有真正起作用。我实际上不确定这是否有任何意义，但我想要的是让我的所有内容都有响应并对当前页面大小做出反应，并以垂直向下或类似的形式进行调整。

这是我的代码，我在文本中有很多＆＃34;填充码，所以对于大混乱：＃＆＃34;

<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 -->

Answer 1

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

希望我的内容能够通过bootstrap响应，但它并没有＆＃34;工作＆＃34;

1 个答案: