Question

我正在尝试将bootstrap集成到wepback中。我正在使用bootstrap-webpack。

bootsrap字体确实正确显示。但是，所有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'}
        ]
    }
};

Answer 1

非常肯定你只是使用了不正确的HTML，例如。

缺少第一组：

<div class="container">

第二组应该是：

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

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

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

Bootstrap + Webpack忽略了我的bootstap类

1 个答案: