学习Bootstrap，如何在其他之后正确地创建列堆栈

Question

我正在尝试在我的实际html上实现bootstrap，只有2个部分它真正需要它所以它很容易，我不需要重新制作所有代码。

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

但是当我把它做得更小时

标题是这样的：

Liga
Juizforana

而不是：

Liga Juizforana

（我忘记了文字的用语，抱歉我的高唱）

并且奖杯有点丢失

当屏幕变小时

奖杯没有得到黑色透明div的描述

当它是移动屏幕时：

奖杯通过一切，它应该在黑色div下面，然后向下推div（用bg），以适应那里，而不是超越一切（红色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结构以使用一些默认的引导类。

基本上，您希望使用行和列的组合来构建代码。

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

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

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

您将我们的背景应用于内部行（或父列类）并对其进行样式设置，使其在移动设备上看起来正确。请记住，首先开始使用移动标记几乎总是更容易，然后将其设置为桌面格式。

请务必查看网格的引导程序文档（http://getbootstrap.com/css/#grid）以获取更多信息，因为它们提供了许多带标记的优秀示例。