如何正确清除Twitter Bootstrap中的浮动内容?

布雷特

我刚刚开始学习twitter bootstrap,我想知道用它清除浮点数的正确方法是什么。

通常我只会做这样的事情:

HTML:

<div class="container">
    <div class="main"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

CSS:

.clear {
    clear: both;
}

.main {
    float: left;
}

.sidebar {
    float: right;
}

请仅忽略上述内容的基础架构。

现在说一下,bootstrap如果我试图在导航部分旁边浮动一些文本,正确的做法是什么?

考虑以下示例bootstrap

<div class="main_container">

    <header id="main_header" class="col-md-12">

        <nav class="navbar navbar-default" role="navigation">

        </nav>

        <div class="contact">

        </div>        

    </header>
</div>

我想将contact字段浮动在字段旁边navbar

我已经阅读了有关bootstrap的.clearfix类的信息,是否只是像上面所做的那样(浮动之后)应用了它?....还是应该将课程应用于其他课程?

四月

您需要利用适当的引导程序类。如果在容器(真正的Bootstrap容器)中,则需要一行以填充填充。

<div class="container">
<div class="row">

        <header id="main_header" class="col-md-12">

            <nav class="navbar navbar-default" role="navigation">

            </nav>

            <div class="contact pull-left">

            </div>        

        </header>
</div>
</div>

Bootstrap已经pull-left并且pull-right已经在浮动内容。clearfix如果您使用的是容器/行,则不需要。

实际上,您也可以(或改为)在导航/联系人上使用网格实用程序。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Bootstrap中实现所需的浮动?

来自分类Dev

正确清除浮动元素

来自分类Dev

如何正确从内存中清除WebBrowser

来自分类Dev

当其他内容浮动正确时,如何在html表格单元格中居中放置内容?

来自分类Dev

twitter bootstrap:当用户键入内容时,如何在右侧添加x以清除输入框?

来自分类Dev

容器中的Twitter Bootstrap内容未居中

来自分类Dev

Bootstrap 4-如何正确调整页脚中的内容?

来自分类Dev

正确打印Twitter Bootstrap

来自分类Dev

如何从Bootstrap模态对话框的HTML控件中清除以前填写的内容?

来自分类Dev

如何使固定内容在Bootstrap中滚动

来自分类Dev

如何防止内容在移动显示中的浮动菜单出现时被下推

来自分类Dev

如何在WebGL上使用GLSL从浮动内容中获取一些信息

来自分类Dev

如何使浮动广告正确显示?侧边栏div保持在左侧,内容保持在右侧浮动

来自分类Dev

Twitter Bootstrap从画布侧栏浮动下来

来自分类Dev

如何清除Powershell中的变量内容

来自分类Dev

如何清除列表代理中的内容

来自分类Dev

如何清除WPF中画布的内容?

来自分类Dev

如何清除UNIX中多个文件的内容

来自分类Dev

如何彻底清除表中的内容?

来自分类Dev

如何清除C中的所有内容?

来自分类Dev

如何清除浮动的img(边栏也浮动)

来自分类Dev

如何清除浮动的img(边栏也浮动)

来自分类Dev

如何在Twitter Bootstrap中垂直对齐媒体正文内容?

来自分类Dev

如何在Twitter Bootstrap中垂直对齐媒体正文内容?

来自分类Dev

在Twitter Bootstrap中通过数据远程覆盖模态内容

来自分类Dev

将内容保留在Twitter Bootstrap面板中

来自分类Dev

无法格式化Twitter Bootstrap中的列和内容

来自分类Dev

如何使小部件在浮动中彼此浮动

来自分类Dev

如何正确清除Java中的整个二叉树?

Related 相关文章

  1. 1

    如何在Bootstrap中实现所需的浮动?

  2. 2

    正确清除浮动元素

  3. 3

    如何正确从内存中清除WebBrowser

  4. 4

    当其他内容浮动正确时,如何在html表格单元格中居中放置内容?

  5. 5

    twitter bootstrap:当用户键入内容时,如何在右侧添加x以清除输入框?

  6. 6

    容器中的Twitter Bootstrap内容未居中

  7. 7

    Bootstrap 4-如何正确调整页脚中的内容?

  8. 8

    正确打印Twitter Bootstrap

  9. 9

    如何从Bootstrap模态对话框的HTML控件中清除以前填写的内容?

  10. 10

    如何使固定内容在Bootstrap中滚动

  11. 11

    如何防止内容在移动显示中的浮动菜单出现时被下推

  12. 12

    如何在WebGL上使用GLSL从浮动内容中获取一些信息

  13. 13

    如何使浮动广告正确显示?侧边栏div保持在左侧,内容保持在右侧浮动

  14. 14

    Twitter Bootstrap从画布侧栏浮动下来

  15. 15

    如何清除Powershell中的变量内容

  16. 16

    如何清除列表代理中的内容

  17. 17

    如何清除WPF中画布的内容?

  18. 18

    如何清除UNIX中多个文件的内容

  19. 19

    如何彻底清除表中的内容?

  20. 20

    如何清除C中的所有内容?

  21. 21

    如何清除浮动的img(边栏也浮动)

  22. 22

    如何清除浮动的img(边栏也浮动)

  23. 23

    如何在Twitter Bootstrap中垂直对齐媒体正文内容?

  24. 24

    如何在Twitter Bootstrap中垂直对齐媒体正文内容?

  25. 25

    在Twitter Bootstrap中通过数据远程覆盖模态内容

  26. 26

    将内容保留在Twitter Bootstrap面板中

  27. 27

    无法格式化Twitter Bootstrap中的列和内容

  28. 28

    如何使小部件在浮动中彼此浮动

  29. 29

    如何正确清除Java中的整个二叉树?

热门标签

归档