为什么Bootstrap 4在移动设备上不断开?

时间:2019-02-26 11:32:55

标签: css twitter-bootstrap bootstrap-4

我有这个代码

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

当我在浏览器中对此进行测试并将浏览器的大小调整为一个较小的窗口时,我看到了div的堆叠。但是,当我将其部署到服务器上并转到手机上的站点时,它并没有堆叠!我已经在使用Chrome的两个Android设备上进行了尝试,它们都表现出相同的行为。

我也尝试过,但是没有成功:

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-6"></div>
        <div class="col-12 col-md-6"></div>
    </div>
</div>

我在这里想念什么?

编辑: 在head部分的index.html中,我添加了以下几行,但没有运气:

<meta name="viewport" content="width=device-width, initial-scale=1" />

编辑: 案例结案:清除了我手机上的缓存后,它终于将div叠了起来。我无法确定是否是因为meta标签,但是我将其标记为可接受的答案。

1 个答案:

答案 0 :(得分:1)

您应该添加

\documentclass[12pt,a4paper]{report} \usepackage[left=3cm,right=3cm,top=-2cm,bottom=4cm]{geometry} \usepackage[utf8x]{inputenc} \usepackage{amsmath} \usepackage{graphicx} \usepackage{placeins} \usepackage{tocloft} \usepackage{ifthen} \usepackage{fancyhdr} \usepackage{lipsum} \usepackage{float} \floatstyle{plaintop} \restylefloat{table} \usepackage{caption} \captionsetup[table]{skip=10pt} \pagestyle{fancy} \usepackage{setspace} \makeatletter % addition for not showing 'Chapter 1' \def\@makechapterhead#1{% \vspace*{50\p@}% {\parindent \z@ \raggedright \normalfont \interlinepenalty\@M \Huge \bfseries \ifnum \c@secnumdepth >\m@ne \thechapter\nobreakspace \fi #1\par\nobreak \vskip 40\p@ }} \@ifundefined{chapter}% {}% {\renewcommand{\chaptermark}[1]{% \ifthenelse{\value{chapter} < 1}% {\markboth{#1}{}}% {\markboth{\thechapter\ #1}{}} }} \addtolength{\headheight}{\baselineskip} \renewcommand{\headrulewidth}{0.4pt} %% thin line under header %\renewcommand{\headrulewidth}{0pt} %% no line under header \renewcommand{\footrulewidth}{0pt} \fancyhf{} %% Clear all fields. %\fancyhead[LE,RO]{\sffamily\thepage} %\fancyhead[LO,RE]{\sffamily\nouppercase{\leftmark}} \fancyhead[R]{\sffamily\thepage} \fancyhead[L]{\sffamily\nouppercase{\leftmark}} \fancypagestyle{plain}{% \fancyhf{} % clear all header and footer fields \fancyfoot[C]{\sffamily\thepage} % except the center \renewcommand{\headrulewidth}{0pt} \renewcommand{\footrulewidth}{0pt} } \makeatother

<meta name="viewport" content="width=device-width, initial-scale=1">标记中。 More information