html - 简单的 Bootstrap 页面上的错误布局和包装-6ren

html - 简单的 Bootstrap 页面上的错误布局和包装

转载作者：太空宇宙更新时间：2023-11-03 22:49:18

25

4

我正在尝试创建一个简单的 Bootstrap 页面，该页面有四个输入字段，每个输入字段都有一个侧边按钮。四个输入字段水平排成一行并在屏幕上居中。

使用我编写的代码，字段向右偏移(因此未居中)，当屏幕缩小时，环绕看起来很糟糕。我的代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WIA</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        .wia-color {
            color: #00DDDD;
        }

        .wia-navbar-logo {
            margin-top: -6px;
            max-height: 44px;
            height: 44px;
        }

        .wia-top-section {
            height: 800px;
            background-color: transparent;
        }

        .wia-logo-strapline {
            margin-top: 0px;
            max-height: 123px;
            height: 123px;
        }

        .wia-strapline-text {
            color: white;
            font-size: 40px !important;
            font-family: Open Sans;
            font-weight: 100;
            font-style: normal;
            margin-top: 38px;
        }

        .wia-filter-column {
            width: 280px;
        }

        .wia-filter-row {
            color: white;
            margin-top: 50px;
            font-size: 18px;
            font-weight: 400;
        }

        .wia-filter-container {
            width: 250px;
            white-space: nowrap;
            float:left;
        }
        .wia-filter-label {
            color: white;
            font-size: 18px;
            font-weight: 200;
            float: left;
            padding-left: 10px;
            margin-bottom: 4px;
        }

        .wia-filter-value {
            value: 'xxx';
            width: 200px;
            height: 30px;
            background-color: #141414;
            border-style: solid;
            border-left-width: 3px;
            border-left-color: #00DDDD;
            border-top: none;
            border-bottom: none;
            border-right: none;
            color: white;
            font-size: 18px;
            font-weight: 200;
            padding-left: 4px;
        }

        .wia-filter-button {
            width: 30px;
            height: 30px;
            background-color: #222626;
            color: #00DDDD;
            border: none;
            vertical-align: top;
            margin-left: -5px;
            font-weight:100;
        }

        /* Remove the navbar's default margin-bottom and rounded borders */
        .navbar {
            margin-bottom: 0;
            border-radius: 0;
        }

        .navbar-inverse {
            background-color: #222626;
            height: 64px;
            max-height: 64px;
            min-height: 64px;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">About</a></li>
                <li><a href="#">Donate</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="jumbotron wia-top-section">
    <div class="container-fluid">
        <div class="row wia-filter-row">
            <div class="col-sm-2">
            </div>
            <div class="col-sm-2 wia-filter-column">
                <div class="wia-filter-label">
                    What
                </div>
                <br/>
                <div class="wia-filter-container">
                    <input class="wia-filter-value" type="text" placeholder="One">
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
                </div>
            </div>
            <div class="col-sm-2 wia-filter-label wia-filter-column">
                <div class="wia-filter-label">
                    Where
                </div>
                <br/>
                <div class="wia-filter-container">
                    <input class="wia-filter-value" type="text" placeholder="Two">
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
                </div>
            </div>
            <div class="col-sm-2 wia-filter-label wia-filter-column">
                <div class="wia-filter-label">
                    When
                </div>
                <br/>
                <div class="wia-filter-container">
                    <input class="wia-filter-value" type="text" placeholder="Three">
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
                </div>
            </div>
            <div class="col-sm-2 wia-filter-label wia-filter-column">
                <div class="wia-filter-label">
                    Who
                </div>
                <br/>
                <div class="wia-filter-container">
                    <input class="wia-filter-value" type="text" placeholder="Four">
                    <button class="wia-filter-button"><span class="glyphicon glyphicon-chevron-down"></span></button>
                </div>
            </div>
            <div class="col-sm-2">
            </div>
        </div>
    </div>
    <div class="container wia-filter-label text-center">
        SOME MORE STUFF
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

我在这里创建了一个plunker:

https://plnkr.co/edit/V0KVM1J2xX1FRAiFYW16?p=preview

最佳答案

问题是 bootstrap 中的列元素是自然 float 的，因此总是会尝试调整到一侧(在本例中为左侧)。

您可以尝试将 CSS 设置为:

.wia-filter-row {
 text-align:center;
}
.wia-filter-row .col-sm-2{
 float:none;
 display: inline-block;
}

因此您可以让具有适当宽度的列显示在一行中。顺便说一下，您不需要空的 div 来强制间距。您可以使用 col-sm-offset-2。

关于html - 简单的 Bootstrap 页面上的错误布局和包装，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40804347/

25

4

0

文章推荐： c# - 计算两个日期之间有多少个时间跨度

文章推荐： opencv - 如何合并相机位于固定位置的两个 3D 点云。

python 包装
正在尝试创建一个 python 包。似乎有效，但我收到警告。我的 setup.py 是: #! /usr/bin/env python from distutils.core import setup
haskell - 包装/展开通用量化类型
我导入了一个数据类型 X ，定义为 data X a = X a 在本地，我定义了一个通用量化的数据类型，Y type Y = forall a. X a 现在我需要定义两个函数， toY 和 fro
rust - 包装 AsyncRead
我似乎无法让编译器让我包装 Tokio AsyncRead: use std::io::Result; use core::pin::Pin; use core::task::{Context, Po
python - 一个接一个地调用Python函数，包装？
我有两个函数“a”和“b”。当用户上传文件时，“b”被调用。 “b”重命名文件并返回新文件名。之后应该编辑该文件。像这样: def a(): edits file def b(): r
.net - 包装 IQueryable
我使用 Entity Framework 作为我的 ORM，我的每个类都实现了一个接口(interface)，该接口(interface)基本上表示表结构(每个字段一个只读属性)。这些接口(inter
java - 包装 jframe
有没有办法打开一个程序，通常会打开一个新的jframe，进入一个现有的jframe？这里是解释，我下载了一个java游戏，其中一个是反射游戏，它在一个jframe中打开，框架内有一堆子面板，我想要做
Android 包装 block ？
我想要下面的布局 | AA BBBBBBB | 除非没有足够的空间，在这种情况下 | AA | | BBBBBBB | 在这种情况下，A 是复选框，B 是复选框旁边的 Text
CSS 问题 - 包装
我正在尝试以不同的方式包装我的网站，以便将背景分为 2 部分。灰色部分是主要背景，还有白色部分，它较小并包装主要内容。基本上我想要this看起来像this . 我不太确定如何添加图像来创建阴影效果，
Java - IntBuffer 包装
我正在使用 : 读取整数文件 int len = (int)(new File(file).length()); FileInputStream fis = new FileInputStream(f
JavaFX 包装 : NoClassDefFoundError
我使用 maven 和 OpenJDK 1.8 打包了一个 JavaFX 应用程序我的 pom.xml 中的相关部分: maven-assembly-plugin
.net - 包装 ItemsControls 的内容
我正在使用两个不同的 ItemsControl 来生成一个按钮列表。
macros - 包装 TimerOutputs 宏
我有一个情况，有一个变量会很方便，to , 可以是 TimerOutput或 nothing .我有兴趣提供一个采用与 @timeit 相同参数的宏来自 TimerOutputs(例如 @timeit
css - 包装 DIV 的边距问题
我正在尝试包装一个名为 content 的 div与另一个具有不同背景的 div。但是，当将“margin-top”与 content 一起使用时div，似乎包装 DIV 获得了边距顶部而不是 co
.net - 什么是 dnu 包装？
文档不清楚，它似乎允许包装 dll 和 csproj 以在 Asp.Net Core 5 应用程序中使用。它是否允许您在 .Net Core 5 网站中使用针对 .Net Framework 4.6
nservicebus3 - 包装 NServiceBus.IHandleMessages
我被要求开发一个层，该层将充当通用总线，而不直接引用 NServiceBus。到目前为止，由于支持不引人注目的消息，这并不太难。除了现在，我被要求为 IHandleMessages 提供我们自己的定义
javascript - 包装 getServerSideProps 抛出异常
我正在尝试包装 getServersideProps使用身份验证处理程序函数，但不断收到此错误:TypeError: getServerSideProps is not a function我的包装看
scala - 定制 SBT 包装
我有一个项目，它在特定位置(不是/src/resources)包含资源(模板文件)。我希望在运行 package-bin 时将这些资源打包。我看到了 package-options 和 packag
javascript - 优化 Jade 包装
我正在寻找打印从一系列对象中绘制的 div。我可以通过使用下面的管道语法来实现这一点。 each i, key in faq if (key == 0) |
javascript - 包装 Collection.insert
我在 Meteor.js“main.js - Server”中有这个方法。 Meteor.methods({ messageSent: function (message) { var a
dart - 包装 polymer 元素纸张输入的验证错误
我注意到，如果我的自定义Polymer 1.x元素的宽度比纸张输入元素上的验证错误消息的宽度窄，那么错误将超出自定义元素的右边界。参见下图: 有没有一种机制可以防止溢出，例如在到达自定义元素的边界时自

首页

博学

6Ren·AI

商城

html - 简单的 Bootstrap 页面上的错误布局和包装