bootstrap 功能 "row" 在我的项目中创建水平列

Question

我在 2017 年使用 visual studio 制作了一个网站。我安装了 bootstrap

图书馆：推特-bootstrap@4.3.1

在做一个简单的容器时，行、列的内容是垂直显示的，而不是横跨屏幕的列。

应该出现：

你好它不会工作

当我运行它在 visual studio:

你好

它

行不通

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4 panel" style="background-color: red">
            Hello</div>
            <div class="col-xs-4 panel" style="background-color: yellow">
            it</div>
            <div class="col-xs-4 panel" style="background-color: pink">
            Wont work</div>
        </div>
    </div>
</body>

Answer 1

检查你的 CSS 是否没有其他行继承代码。

Answer 2

在我看来，不要使用 Bootstrap 水平对齐项目，而是使用 css。

<body>
    <div class="container-fluid">

            <div class="one panel" style="background-color: red">
            Hello</div>
            <div class="two panel" style="background-color: yellow">
            it</div>
            <div class="three panel" style="background-color: pink">
            will work</div>

    </div>
</body>

css

panel{
width: 33%;
}

如果你只想让它成为一个小视图端口中的列，请使用媒体查询。

希望对您有所帮助..

Answer 3

这是我的布局视图的问题。谢谢你，抱歉打扰了。

bootstrap 功能 "row" 在我的项目中创建水平列

The bootstrap feature "row" makes horizontal columns in my project

html

css

twitter-bootstrap

visual-studio-2017