标签: twitter-bootstrap

我必须在导航栏的右侧添加一个小下拉菜单。我试图通过添加一个设置宽度的新 CSS 类来设置元素的宽度，但我尝试的任何方法都不起作用。

<li class="nav-item dropdown">
      <a href="#"
      id="navbarDropdown"
      data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false"
      class="nav-link dropdown-toggle">
      some text
      </a>
      <div aria-labelledby="navbarDropdownLangMenu"
          class="dropdown-menu">
      <a class="dropdown-item">AA</a>
      <a class="dropdown-item">BB</a>
      </div>
    </li>

除了元素的宽度之外，一切都工作正常。每个链接只有两个字符，但它们的宽度很大，超出了屏幕的宽度：

导航栏粘在顶部，直到我滚动出英雄图像然后消失。我希望导航栏出现在整个页面中。有任何想法吗？

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Me</a>
                </li>
            </ul>
        </div>
    </nav>
<!--Navbar end-->

<!-- Homescreen hero -->
    <div class="hero-image" id="home">
        <div class="hero-text">
            <h1 class="name">Text</h1>
            <h1>Text</h1>
        </div>
    </div>

我使用 bootstrap 4 并将 4 列排成 1 行。当我转到移动设备时，我希望 4 列变成 1 列（本质上是每列添加一行。）

我的理解是，如果我将 col-sm-12 添加到我的 div 中，这将执行我想要的操作，但它不起作用。我缺少什么？

<div class="col col-sm-12">
<div>Required Forms</div>
<p>View what forms are required for shipping to the event.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Invoice Instructions</div>
<p>Instructions on how to complete the commercial invoice form.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Labeling &amp; Packing</div>
<p>Tips on packing and labeling your shipment.</p>
</div>
<!-- col -->

<div class="col col-sm-12">
<div>Wood Packing</div>
<p>Important information on wood …

动态生成元素的代码：

var rStatus = $("#statusText").val();
var roleID = $('#' + Globals.divUserRoleID).html().trim();
var nodelen = response.tsuites.length;
$("#TestSuiteSideMenu").empty();

for(var ts=0;ts<nodelen;ts++){
  var testSuiteName = response.tsuites[ts];
  var testNum = response.tnames[testSuiteName].length;
	var tsMenu =  	"<li class='treeview' id='suitemenu'>"+
           		"<a href='#' ><i class='fa fa-cubes'></i><span value="+testSuiteName+" id=edit-"+testSuiteName+">"+testSuiteName+"</span><i class='fa fa-angle-left pull-right'></i></a>"+"<ul class='treeview-menu' id="+testSuiteName+">"+
				"<li class='suite-options'>"+
                    	"<p align='center'>"+
                        "<button type='button' id='btnSuiteRun-"+testSuiteName+"' class='btn test-btns btn-xs runsuite' data-toggle='tooltip' title='Run Suite'><img src='/assets/images/play_win_icon.svg' class='playwin'></button>"+
                        "<button type='button' id='btnSuiteEdit-"+testSuiteName+"' class='btn test-btns btn-xs editsuite' data-toggle='tooltip' title='Rename Suite'><i class='fa fa-pencil'></i></button>"+
                        "<button type='button' id='btnSuiteImport-"+testSuiteName+"' class='btn test-btns btn-xs importTest' name='"+testSuiteName+"' …

我将 Bootstrap Vue 与 Vue.js 结合使用，并且遇到了一个问题，即我正在迭代某些项目并将其显示给用户。

问题是，当用户单击其中一个弹出窗口时，每个打开的弹出窗口都会关闭（如我所愿），但是当用户单击目标（​​打开的）弹出窗口的焦点区域之外时，它不再关闭。

看起来每次用户单击目标弹出窗口时都会运行打开动画。

这是代码：

<template>
  <div>
    <div class="row" v-for="(n, i) in 5" :key="n">
      <div :id="'popover' + visitor.id + '-' + i" @click="$root.$emit('bv::hide::popover')">
        <div class="card">
          <b-popover :target="'popover' + visitor.id + '-' + i">
            <template slot="title">
              Edit image
              <button
                class="close-popover"
                @click="$root.$emit('bv::hide::popover', 'popover' + visitor.id + '-' + i)"
              >X</button>
            </template>
          </b-popover>
        </div>
      </div>
    </div>
  </div>
</template>

任何帮助表示赞赏！

再会。

我正在关注这个教程

https://www.tutsmake.com/new-angular-7-upload-file-image-example/

这将上传一个文件

我创建了一个fileupload组件

修改了app.module.ts文件

import { HttpClientModule } from '@angular/common/http';


imports: [
      BrowserModule,
      AppRoutingModule,
      RouterModule.forRoot(appRoutes),
      HttpClientModule
   ],

截至目前，这是代码fileupload.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fileupload',
  templateUrl: './fileupload.component.html',
  styleUrls: ['./fileupload.component.css']
})
export class FileuploadComponent implements OnInit {
  fileData: File = null;
  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  onSubmit() {
    console.log('Called');
  }

}

这是我的fileupload.component.htnl

<form (ngSubmit)="onSubmit()">
  <div class="form-group">
      <input type="file" name="image"  />
  </div> …

我们已将应用程序从Angular 5.2 升级到 7.2，但样式变得一团糟。某些元素（例如：图标和文本）之间的间距已更改、消失或减小。

你们中有人在升级 Angular 应用程序或以下软件包后遇到过类似的问题吗？

我已经将所有可能的包恢复到其暂存版本，但这并没有解决问题。

我不知道从哪里开始排除故障以找到问题的根源。样式和 HTML 未更改。

我们更新了：

• 引导程序：从 4.1.0 到 4.3.1
• @ng-bootstrap/ng-bootstrap：从 1.1.2 到 4.0.0
• ngx-bootstrap：从 2.0.5 到 4.0.0

样式是来自angular.json的全局样式：

我们在哪里导入使用过的 Bootstrap 组件：

package.json看起来像这样：

{
  "private": true,
  "dependencies": {
    "@angular/animations": "7.2.11",
    "@angular/common": "7.2.11",
    "@angular/compiler": "7.2.11",
    "@angular/core": "7.2.11",
    "@angular/forms": "7.2.11",
    "@angular/http": "7.2.11",
    "@angular/platform-browser": "7.2.11",
    "@angular/platform-browser-dynamic": "7.2.11",
    "@angular/platform-server": "7.2.11",
    "@angular/router": "7.2.11",
    "@fortawesome/angular-fontawesome": "0.3.0",
    "@fortawesome/fontawesome-svg-core": "1.2.12",
    "@fortawesome/free-solid-svg-icons": "5.6.3",
    "@ng-bootstrap/ng-bootstrap": "4.0.0",
    "@nguniversal/express-engine": "7.1.1",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "acorn": "6.1.1",
    "angular2-image-zoom": "1.2.1",
    "bootstrap": "4.3.1", …

我想根据搜索值隐藏和显示行内的引导列。

这是一个简单的模板：

<div class="container py-5">
  <p class="text-center"><input type="text" placeholder="search" [(ngModel)]="searchVal"></p>
  <div class="row">
    <div *ngFor="let val of values" class="col-4 my-2">
      <ng-container *ngIf="val.toLowerCase().indexOf(searchVal.toLowerCase())!=-1">
        {{val}}
      </ng-container>
    </div>
  </div>
</div>

和组件：

export class AppComponent  {
  searchVal : string = "";
  values = ['Manager', 'Model', 'Teacher', 'Student'];
}

理想的解决方案是在列上使用 ngFor 和 ngIf：

<div class="row">
    <div *ngFor="let val of values" class="col-4 my-2" *ngIf="val.toLowerCase().indexOf(searchVal.toLowerCase())!=-1">
        {{val}}
    </div>
  </div>

但我们都知道，不可能在同一元素上同时使用两者。

在我在这里提供的代码中，我使用 ng-container 来解决这个问题，但是，由于 ng-container 不在列内，如果值不匹配，则该列保持显示，其内容被隐藏，这看起来很难看。尝试在搜索字段中输入字母“t”，看看我的意思。我正在寻找的解决方案是如果其值不匹配则删除整个列。

这是运行代码： https: //angular-rgc8f7.stackblitz.io

我有一个名为“严重性”的复选框组，它们分为 2 行，每行有 3 个复选框。

然而，复选框的垂直对齐方式不太正确。

我需要将“未分类”、“警告”和“高”放在一行中，并将其他放在该行下方。

我使用额外的空 div 来划分它们，有没有更好的方法来实现这一点。\n以及如何将复选框与 bootstrap.txt 正确对齐。

当前未对齐的屏幕截图

正如您所看到的，警告和平均值没有对齐。

<div class="form-group">\n                    <label for="name" class="col-sm-4 control-label">Severity</label>\n                    <div class="col-sm-8">\n                        <div class="checkbox-inline">\n                            <input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">\n                            <label class="form-check-label" for="severity_0">Not classified</label> \xc2\xa0\n                        </div>\n                        <div class="checkbox-inline">\n                            <input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">\n                            <label class="form-check-label" for="severity_2">Warning</label>\n                        </div>\n                        <div class="checkbox-inline">\n                            <input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">\n                            <label class="form-check-label" for="severity_4">High</label>\n                        </div>\n                        <div></div>\n                        <div class="checkbox-inline">\n                            <input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">\n                            <label class="form-check-label" for="severity_1">Information</label> \xc2\xa0\n                        </div>\n …

请看一下这个问题。我有完整的一页简单 html 代码来重现它。有两种模式 - 一种位于页面顶部，另一种位于页面下方。模态框内的输入字段。如果您点击输入字段，它会滚动到最底部，这样我就看不到输入字段。此问题仅出现在底部模态中，而不是顶部模态中。在 ANDROID 上使用 Chrome

这是代码：

  
<!doctype html>
<html lang="en">
<head>
	 
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Hello, world!</title>
    
    
    
</head>

<body>
      <h4>Hey</h4>
    
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal1">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
           <p>input</p>
        <input type="text"> …