Question

我目前正在网站上，由于某种原因，我对徽标/横幅的大小感到困惑，因为主题的唯一选择是导入徽标并使用徽标。我上传了横幅，我希望它能直截了当且非常合适吗？谁能帮我

  import 'package:flutter/material.dart';

  void main() => runApp(new MyApp());

  class MyApp extends StatelessWidget {

    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(

          primarySwatch: Colors.blue,
        ),
        home: new MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);

    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;

    void _incrementCounter() {
      setState(() {

        _counter++; // <- I set a breakpoint

      });
    }

    @override
    Widget build(BuildContext context) {

      return new Scaffold(
        appBar: new AppBar(

          title: new Text(widget.title),
        ),
        body: new Center(

          child: new Column(

            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                'You have pushed the button this many times:',
              ),
              new Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: new Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      );
    }
  }

请问有人可以帮我吗？

谢谢。

Answer 1

那是因为您的徽标被卡在h1标签之间
从h1中将其删除后，默认的引导程序类将带有默认的填充和边距。

添加此

.navbar-brand
{
padding:0;
margin:0;
}

并删除引导类col-sm-3 因为.col-sm-3只占25％的空间

由于您需要使用col-sm-12填充屏幕，因此它将占据页面的100％。

要了解有关引导网格的更多信息，请参见此处：https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

引导网格也带有默认填充。删除填充物以适合屏幕

添加此

.col-sm-12
{
padding:0;
}

.row
{
margin:0;
}

您现在将拥有完整尺寸的图像。希望我能帮上忙。

Answer 2

您提供的CSS令人困惑。标头图片所在的容器称为navbar-brand。在CSS Ctrl + F中找到它

添加此代码段，它就可以执行您想要的操作。

.navbar-brand{
   width: 435% !important;
}

现在，如果要更改标题图像的尺寸，则必须更改宽度百分比以使新尺寸与标题相匹配。

Answer 3

有两种方法可以解决此问题，一种是将导航栏列设置为 col-sm-12 这样，容器的宽度将为100％，并且将自动采用全宽。因为目前它的 col-sm-4 意味着33.33％。

添加宽度超过100％绝不是一个好习惯，您可以在样式表中添加此代码作为第二个选择。

.navbar-brand {
    width: 1140px !important;}

Wordpress Style.css标头错误

3 个答案: