Bootstrap + Webpack 忽略了我的引导类答案

【问题标题】：Bootstrap + Webpack are ignoring my bootstrap classesBootstrap + Webpack 忽略了我的引导类
【发布时间】：2016-04-14 14:27:30
【问题描述】：

我正在尝试将引导程序集成到 wepback 中。我为此使用bootstrap-webpack。

引导字体确实显示正确。但是，所有 row 和 container-fluid 类都将被忽略。

我调查了 DOM，可以确认找到了 bootstrap.css 文件，并且类已应用于 div。但看起来它们几乎没有效果。

我期待 aaaaa 和 bbbb 并排。侧边栏和表单也应该并排显示。

有什么想法吗？

我的 index.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Angular with Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="app">
<h1>Bootstrap + Webpack</h1>

<div class="row">
    <div class="span10">
        aaaaaaaaaaaaaaa
    </div>
    <div class="span2">
        bbbbbbbbb
    </div>
</div>

<div class="container-fluid">

    <div class="row-fluid">
        <div class="span2">
            <h1>Sidebar content</h1>
        </div>
        <div class="span10">
            <p>Write some text in textbox: <input type="text" ng-model="sometext" /></p>
            <p>Hello {{sometext}}</p>
        </div>
    </div>
</div>

<script src="bundle.js"></script>

</body>
</html>

index.js 文件：

import 'expose?$!expose?jQuery!jquery';
import angular from 'angular';
import 'bootstrap-webpack';

var ngModule = angular.module('app', []);

webpack.config.file:

module.exports = {
    debug: true,
    devtool: 'source-map',
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ]
    }
};

【问题讨论】：

标签： javascript css twitter-bootstrap webpack

【解决方案1】：

例如，可以肯定的是，您只是使用了不正确的 HTML。

缺少第一组：

<div class="container">

第二组应该是：

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

列宽也是col-*-* 而不是span*

http://getbootstrap.com/css/#grid-options

【讨论】：