我正在将 Bootstrap 用于一些 UI 元素：SelectPicker，它允许用户选择多个选项并在段落标签中将其呈现到屏幕上。他们还应该能够删除选定的选项。

这是我将所选选项呈现到屏幕上的代码，因此每个选项旁边都会显示一个“X”，当单击它时，所选项目将从屏幕中删除：

//Render selected item to the screen

$('#dataCombo').change(function(){
$('#dataOutput').html('');
var values = $('#dataCombo').val();
for(var i = 0; i < values.length; i += 1) {
$('#dataOutput').append("<p class='removeable'>" + values[i] + " x </p>")
}});

//When the 'X' is clicked, remove that item

$("#dataOutput").on('click','.removeable',function(){
$(this).remove(); //this removes the item from the screen
//Next i need to unselect it from dataCombo selectpicker
var foo = $(this);
$('#dataCombo').find('[value=foo]').remove();
console.log(foo);
$('dataCombo').selectpicker('refresh');
});   

所以问题是“删除”代码的后半部分，虽然该项目确实从输出显示中删除了，但它仍然在选择选择器中被选中，所以当另一个项目被选中时——“删除”项目被重新渲染. 任何想法我怎么能做到这一点？

HTML非常简单：

<h6>ComboBox</h6>
<select id="dataCombo"  class="selectpicker" multiple> …

我已经安装bootstrap-sass-official并font-awesome使用了凉亭.我已经尝试了所有可能的组合,使用scss在bootstrap中包含fontawesome.

最可能的解决方案是在我的应用程序main.scss文件中指定以下内容:

$fa-font-path: "../bower_components/font-awesome/fonts";
@import "font-awesome/scss/font-awesome";
@import '../../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss';

并@import "bootstrap/glyphicons";在主bootstrap.scss文件中注释掉.

如果我启动我grunt serve的http://localhost:9000/(我使用从默认Web应用程序的自耕农一个gruntfile)我可以看到我的应用程序运行.

我可以main.css在所有fontawesome类中看到我的文件,并在其中查看fonts(../bower_components/font-awesome/fonts/fontawesome-webfont.eot)位置的引用URL .

一切似乎都没问题,但每当我使用FontAwesome图标时,例如<span class="fa-star"></span>我得到一个空的方框而不是图标.我错过了一些我看不到的东西......

我试图以这种方式连接Symfony 2和MongoDB:

1. 在 方法中注册DoctrineMongoDBBundleAppKernel::registerBundles
2. 设置' doctrine_mongo_db'配置(见下文config.yml)
3. 获得" doctrine.odm.mongodb.document_manager从容器" HelloController行动

当我尝试运行应用程序时抛出MongoConnectionException.

任何人都可以帮我解决这个问题吗？

AppKernel.php

public function registerBundles()
{
        $bundles = array(
            new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
            new Symfony\Bundle\TwigBundle\TwigBundle(),
            new Symfony\Bundle\DoctrineMongoDBBundle\DoctrineMongoDBBundle(),
            new Sensio\HelloBundle\HelloBundle()
        );

        return $bundles;
    }

config.yml

framework:
    charset:       UTF-8
    router:        { resource: "%kernel.root_dir%/config/routing.yml" }
    templating:    { engines: ['twig'] } 

## Doctrine Configuration

doctrine_mongo_db:
    server: mongodb://root:root@192.168.0.111:27017
    default_database: test
    options: { connect: true }
    mappings:
        HelloBundle: { type: annotation, dir: Document }

# Twig Configuration

twig:
    debug: …

我在网格定义中有一个启用了选择模式的网格

selectable: true

我需要通过按钮使网格不可选.我尝试过这个,但它不起作用:

$("#disableKendoGrid").click(function () {
    var grid = $("#myGrid").data("kendoGrid");
    grid.options.selectable = false;
    grid.refresh();
});

我正在使用Bootstrap 3.1.0.当"视词"对于视口变得太长时,它会被切断,从不显示底部项目.

是否有可能让Bootstrap的词缀表现为用户仍然可以从上到下滚动整个词缀？

问题的例子:

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

        <div class="col-md-3">
            <div class="list-group" id="sidebar">
                <a href="#" class="list-group-item">Long</a>
                <a href="#" class="list-group-item">list</a>
                <a href="#" class="list-group-item">with</a>
                <a href="#" class="list-group-item">many</a>
                <a href="#" class="list-group-item">entries</a>
                ...
                <a href="#" class="list-group-item">29. Last</a>
            </div>
        </div>

        <div class="col-md-9">
          ... regular content    
        </div>

    </div>
</div>

我希望我的jsFiddle能够解释这个问题.

我想为中等屏幕尺寸进行以下布局

<div class="col-md-12">A</div>
<div class="col-md-12">B</div>
<div class="col-md-12">C</div>

[A-12]
[B-12]
[C-12]

我想为大屏幕尺寸进行以下布局

<div class="col-lg-9>A</div>
<div class="col-lg-3>C</div>
<div class="col-lg-9>B</div>

[A-9][C-3]
[B-9]

我首先做的是我的小屏幕设计(因为它应该首先是移动的吗？)然后我试图推/拉B和C将C放在A旁边但是它没有用.

<div class="col-md-12 col-lg-9">A</div>
<div class="col-md-12 col-lg-9 col-lg-push-3">B</div>
<div class="col-md-12 col-lg-3 col-lg-pull-9">C</div>

//Expected result
[A-9][C-3]
[B-9]

//Result I'm getting
[A-9]
[C-3][B-9]

那么,我应该如何进行布局以获得预期的结果呢？

描述

在 webpack 中我使用mini-css-extract-plugin：

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[hash].css',
    chunkFilename: '[name].[hash].css',
  })
]

加载块文件中的 scss 文件：

{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader, options: {
        hmr: isdev,
        reloadAll: true
      }
    },
    "css-loader",
    "sass-loader",
  ]
}

当我使用动态导入加载 scss 时：

import(/* webpackChunkName: "test" */ 'test.scss')

它将生成一个包含样式的test.[hash].css和一个test.[hash].js：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[15],{

/***/ 81:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ })

}]);

问题

我想最大限度地减少延迟和加载的文件，因此我发现拥有几乎空的test.[hash].js文件是多余的。

您是否有办法将 scss 包含在 …

我正在尝试在 XR 环境中实现这个小提琴。

在小提琴中，第二个场景固定在屏幕上，但不使用 oculus/玩家相机...

有没有人有办法使场景或物体始终位于眼的右上角？我想尺寸和相机有错误，但找不到什么......

我不确定，我脑子坏了，这是我迈向 XR 的第一步......

门户第二场景代码：

function Viewcube() {
  const { gl, scene, camera, size } = useThree()
  const virtualScene = useMemo(() => new Scene(), [])
  const virtualCam = useRef()
  const ref = useRef()
  const [hover, set] = useState(null)
  const matrix = new Matrix4()

  useFrame(() => {
    matrix.copy(camera.matrix).invert()
    ref.current.quaternion.setFromRotationMatrix(matrix)
    gl.autoClear = true
    gl.render(scene, camera)
    gl.autoClear = false
    gl.clearDepth()
    gl.render(virtualScene, virtualCam.current)
  }, 1)

  return createPortal(
    <>
      <OrthographicCamera ref={virtualCam} makeDefault={false} position={[0, 0, 100]} />
      <mesh
        ref={ref}
        raycast={useCamera(virtualCam)} …

如果旋转木马在第一个项目上,如何隐藏左控件,如何在旋转木马位于最后一个项目时隐藏右控件.

我的下面的代码成功地隐藏了控件,但是在页面加载时,就好像旋转木马的第一个项目在中间,用户可以通过左或右控件一直进入.

http://bootply.com/99354

谢谢

我正在为我的Web应用程序使用bootstrap,我在验证消息时遇到问题,因为它将消息状态置于正确的位置.现在我在此链接中使用此示例,使用以下代码:

<div class="control-group error">
  <label class="control-label" for="inputError">Input with error</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">Please correct the error</span>
  </div>
</div>

现在我使用的代码:

<h4 class="form-signin-heading">Please sign in</h4>
<div class="control-group">
    <div class="controls">                 
        @Html.TextBoxFor(u => u.Username, new {placeholder="Username", @class="form-control username", id="inputError"}) 
        <span class="help-inner">@Html.ValidationMessageFor(u => u.Username)</span>                        
    </div>

    <div class="controls">       
        @Html.PasswordFor(u => u.Password, new {placeholder="Password", @class="form-control password"}) 
        @Html.ValidationMessageFor(u=> u.Password)
    </div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

我的代码执行此操作(也在小提琴中:http://jsfiddle.net/4h5E5/1/):

但我的不满是将验证消息放在这个位置(如链接中的示例):