学习Bootstrap，如何正确地让一列堆叠在其他之后

Question

我正在尝试在我的实际 html 上实现 bootstrap，只有 2 个部分真正需要它，所以很简单，我不需要全部 re-make代码。

所以，这基本上就是我想要的，这就是我在 1080p 屏幕上所拥有的。

但是当我把它变小一点的时候

标题是这样的：

Liga
Juizforana

而不是：

Liga Juizforana

（当文本这样做时我忘记了术语，抱歉我的笨拙）

奖杯有点丢了

当屏幕变得更小的时候

奖杯不要盖在黑色透明div下面有描述

当它是移动屏幕时：

奖杯穿过一切，它应该在黑色div下面，并将div（带背景）向下推，以适应那里，而不是超越一切（红色 div).

html:

<div class='conteudo col-md-offset-1'>

        <div class='inicio'>
        <a id='inicio'></a>
            <div class='topo'>
                <div class='subir col-lg-6 col-lg-offset-1'>
                <div>
                <p class='titulo'>Liga Juizforana</p>

                <hr size='1' align='left'>

                <p class='subtit'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a cidade focando em League of Legends. A intenção do campeonato é a diversão de todos, tendo campeonatos sempre que possível para todos se interagirem, conhecerem e entrarem no cenário competitivo da cidade.</p>
                </div>
                </div>


                <div class='grandelogo col-lg-5 col-lg-offset-7'>
                    <img src='imagens/LigaJFLogo.png' border='0px' alt='LigaJFLogo' title='LigaJFLogo'>
                </div>
            </div>

            <div class='textos'>
                <p id='intro'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a área da cidade começando por League of Legends. A intenção do campeonato é o foco na diversão de todos, tendo campeonatos sempre que possível para todos entrarem no cenário competitivo da cidade.<br><br>

                Dessa vez é a terceira edição :D. Inicialmente o campeonato vai ser focado em ter 16 times no total, e conseguimos recompensa da própria Riot! Inicialmente o campeonato será online mas caso cresçamos o campeonato pode ter etapas offline, e caso você queira ajudar com isso, pode mandar uma mensagem pelo próprio sistema de contato pelo site.</p>

                <div class='logoLol'>
                    <img src='imagens/lolLogo.png' border='0px' alt='lolLogo' title='lolLogo'>
                </div>
.
.
.

我喜欢把所有这些类放在一起来理解什么是什么，并尽量避免一些问题，谁知道我是否使用了同名的东西等等，并且所有东西都有问题。 css:

.conteudo {
    }

.conteudo .topo {
    height: 952px;
    background-image: url("http://na.leagueoflegends.com/sites/default/files/upload/art/wp_alistar_vs_olaf_1920x1080.jpg");
    background-color: #ffffff;
}

.topo .titulo {
    max-width: 85%;
    font-size: 74px;
    color: white;
    text-shadow: 5px 5px 1px rgba(0, 0, 0, 1);
}

.topo hr {
}

.subir{
    padding-top: 250px;

}

.topo .subtit {
    margin-left: 80px;
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px 1px rgba(1, 0, 0, 1);
}


.subir div {    
    background-color: rgba(0, 0, 0, 0.6);
    padding-left: 50px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}


.grandelogo {
    margin-top: -34%;
}

我对响应能力很菜鸟，我正在努力学习，但没有任何效果，请帮助我 D:，我不想问这个问题，但我尝试了很多，我想得到提示对此，我可以做的事情。我知道这是一个大问题，但是，对于知道的人来说基本上很简单，我只是放了很多屏幕让你们很容易理解这个问题

Answer 1

使用 bootstrap 重要的是 首先关注移动设备。如果你想让一个列在小屏幕上使用全宽，在大屏幕上使用半宽，在最大屏幕上使用 1/4 宽度，你必须指定它：

<div class="col-xs-12 col-md-6 col-lg-3">

当涉及到文字换行问题时，您可以使用媒体查询将文字变小：

@media (min-width: 320px) {
  .titulo {
    font-size: 1em;
  }
}


@media (min-width: 700px) {
  .titulo {
    font-size: 3em;
  }
}

Answer 2

您需要稍微调整 HTML 结构以使用一些默认 bootstrap classes.

基本上你会想要使用行和列.

的组合来构建你的代码

在您的示例中，您有两个大的内容块（透明的黑色块和奖杯图像）。

这些应该包含在一行中，但在两个单独的列中。例如：

<div class="row">
    <div class="col-xs-12 col-md-6">Liga Juizforana Block</div>
    <div class="col-xs-12 col-md-6">Trophy Block</div>
</div>

与这两个块一起存在的任何内容都应包含在进一步的 <div class="row"> 个块中。

我什至可能会调整您的完整标记，以便将整个页面包裹在一行中，左侧导航栏在一列中，主页内容在另一列中。

<div class="row">
    <div class="col-xs-12 col-md-2">
        Left-Side Nav
    </div>
    <div class="col-xs-12 col-md-10">
        <div class="row large-background">
            <div class="col-xs-12 col-md-6">Liga Juizforana Block</div>
            <div class="col-xs-12 col-md-6">Trophy Block</div>
        </div>
    </div>
</div>

您可以将我们的背景应用到内行（或父列 class）并设置样式，使其在移动设备上看起来恰到好处。请记住，首先从移动标记开始，然后再将其设置为桌面样式几乎总是更容易。

确保查看网格的 Bootstrap 文档 (http://getbootstrap.com/css/#grid) 以获取更多信息，因为它们提供了很多很好的标记示例。

学习Bootstrap，如何正确地让一列堆叠在其他之后

Learning Bootstrap, how to make a column stack correctly after other

html

css

twitter-bootstrap

twitter-bootstrap-3