为什么Bootstrip网格不起作用，而按钮却起作用？

Question

这是带有引导程序类的php（在我的wordpress主题的single.php文件中）

<?php get_header(); ?>

<button class="btn-danger">Hello Bootstrap World</button>

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>


<?php 
get_footer(); 
?>

这是结果的图片

有人知道为什么这些列没有排列吗？由于按钮样式有效，引导程序似乎已在wordpress中正确排队。这是我在wordpress中的排队行。

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
}

任何人都可以给我其他有关如何使其正常工作的提示吗？

谢谢您的帮助

Answer 1

您需要将内容包装在容器类中。

<div class="container">
    <div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4">.col-sm-4</div>
    </div>
</div>

Answer 2

您不必添加容器。您的CSS可能会被其他CSS覆盖。

Answer 3

引导程序遵循以下网格结构。

Bootstrap网格系统具有四个类：

1. xs（用于电话-屏幕宽度小于768像素）
2. sm（适用于平板电脑-屏幕宽度等于或大于768像素）
3. md（适用于小型笔记本电脑-屏幕宽度等于或大于992px）
4. lg（用于笔记本电脑和台式机-屏幕等于或大于 1200px宽）

因此，如果您要在桌面上放置3列，请放置class =“ col-md-4”。

参考：https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp