标签: materialize

嘿伙计们正在使用物化css为我的网站.当我插入滑块的代码时,它只显示一个灰色的背景.这是我的代码:

<div class="slider">
<ul class="slides">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1">
    <div class="caption center-align">
      <h3>This is our big Tagline!</h3>
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
    </div>
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2">
    <div class="caption left-align">
      <h3>Left Aligned Caption</h3>
      <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
    </div>
  </li>
</ul>

我正在使用 Materialise 作为我的导航栏。我正在尝试使导航栏可折叠到移动设备上的侧边栏中，如此处所示。它确实折叠成侧菜单，但导航栏在移动设备上太小，如下所示。如何使导航栏更窄更高，以便在移动设备上更可用？如果相关的话，我还将它与 Meteor 一起使用，使用 Materialize:materialize 包。

我正在尝试在 Rails 项目中使用 Materialize CSS 框架，但遇到以下错误：

File to import not found or unreadable: materialize. Load paths: 
/home/ubuntu/workspace/photoid/app/assets/images 
/home/ubuntu/workspace/photoid/app/assets/javascripts 
/home/ubuntu/workspace/photoid/app/assets/stylesheets 
/home/ubuntu/workspace/photoid/vendor/assets/javascripts 
/home/ubuntu/workspace/photoid/vendor/assets/stylesheets 
/usr/local/rvm/gems/ruby-2.3.0/gems/web-console-2.0.0.beta3/app/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/web-console-2.0.0.beta3/app/assets/stylesheets 
/usr/local/rvm/gems/ruby-2.3.0/gems/web-console-2.0.0.beta3/lib/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/web-console-2.0.0.beta3/vendor/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-2.5.3/lib/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/font-awesome-rails-4.6.3.1/app/assets/fonts 
/usr/local/rvm/gems/ruby-2.3.0/gems/font-awesome-rails-4.6.3.1/app/assets/stylesheets 
/usr/local/rvm/gems/ruby-2.3.0/gems/cloudinary-1.2.0/vendor/assets/html 
/usr/local/rvm/gems/ruby-2.3.0/gems/cloudinary-1.2.0/vendor/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.1.1/lib/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.6/assets/stylesheets 
/usr/local/rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.6/assets/javascripts 
/usr/local/rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.6/assets/fonts 
/usr/local/rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.6/assets/images 
/usr/local/rvm/gems/ruby-2.3.0/gems/bootstrap-sass-3.3.6/assets/stylesheets

应用程序.scss

/*
*= require_tree .
*= require_self
*= require font-awesome
*/

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"

@import "materialize";
@import "bootstrap-sprockets";
@import "bootstrap";

应用程序.js

//= require jquery
//= require jquery_ujs
//= require materialize-sprockets
//= require bootstrap-sprockets
//= require turbolinks
//= …

我想默认将实现中的选择禁用。

<form>
 <select id="mySelect" required disabled>
  <option>Cats</option>
  <option>Dogs</option>
 </select>
</form>

<button id="try" >Try it</button>

jQuery：

$('#try').click(function(){
 $('#mySelect').prop("disabled", false);
};

在开发工具中，它显示了单击“尝试”按钮时，已禁用select属性的属性。但是，下拉列表将不起作用。我认为这是特定于实现的事情，因为它似乎动态地在我的选择上方生成了样式化的无序列表。它将禁用添加到这个新生成的列表，我也将其删除了。

我是Vue.js的新手,我想用Materialize制作我的项目.我尝试了很多插件,如:vue-materialize(https://github.com/paulpflug/vue-materialize),vue-material-components(https://www.npmjs.com/package/vue-material-components)并没有奏效.我也尝试将jQuery插件添加到webpack,我没有任何解决方案:

new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
}),

现在我正在努力使工作成为输入选择字段.我怎样才能做到这一点？

JSFiddle在这里.

正如您在给定的SSCCE中看到的那样,徽标中的图像与其旁边的文本不完全对齐.我需要它<img>并且<span>完美地相邻,因此它们是垂直 - 中间对齐的,而不是共享相同的基线.

我有这个:

我需要这个:

那我该怎么做？

给人vertical-align:middle;以.brand-logo或.brand-logo > img或两者.brand-logo > img并.brand-logo > span没有帮助.

添加类valign-wrapper到a.brand-logo或者div.nav-wrapper还没有帮助.(来源)

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>


<nav class="black">
	<div class="nav-wrapper">

		<a class="brand-logo center brown-text text-lighten-4" href="#"><img alt="" src="https://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png" width="40px" height="40px" class="responsive-img" />
			<span>BRAND</span>
		</a>

	</div>
</nav>

我试图把一个单选按钮，里面的信件（Materialise的框架），这在像A和B的图像。

我该怎么做呢？

我正在尝试向导航栏添加一个下拉菜单，如此处的文档所述。

默认情况下，.dropdown-content设置为top: 0;。这是默认行为：

如果将顶部更改为50px，materialize.css则实际上将其向上移动50像素并将元素样式设置为top: -50px。

这是代码：

.dropdown-content {
    top: 50px;
}

但是在渲染时，该元素如下所示：

<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -50px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

（关键是`top：-50px;）

我测试了多个值，这里是65：

.dropdown-content {
    top: 65px;
}
<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -65px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

（现在是 …

我正在尝试在使用MaterializeCSS库创建的行中对齐容器。 文档似乎没有提到任何关于已经在行内的居中对象的内容，所以我想我会在这里问。

当前代码：

<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">

<div class="row" style="width: 100%;height: 100%;">

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img1.png">
    </div>

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img2.png">
    </div>

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img3.png">
    </div>

</div>

这是它目前的样子：

我想要什么（草图）：

是否有任何可以执行的 CSS 魔法来实现这一点？

非常感激。

对于一个愚蠢的问题感到抱歉，但我无法完全理解会发生什么，如果这是我怀疑的问题，那么我真的很茫然。我正在使用弹簧靴+百里香叶+物化CSS来显示和验证表单。现在我在很多例子中没有遇到的是这种情况：

一些表单字段是预先填写的，对客户端来说应该被禁用，显示其预先填写的值。这种预填充发生在控制器中，而我处理其他一些请求，并重定向到该视图

我正在使用th：object这样将pojo绑定到表单

<form id="register_form" action="#" th:action="@{/showform}" th:object="${userInfo}" method="post">
 <div class="input-field">
   <label th:text="#{label.surname}" for="surname"></label>
   <input type="text" th:field="*{surname}" id="surname" th:attr="value=${userInfo.surname}" />
 </div>
 <div class="input-field">
   <label th:text="#{label.name}" for="givenname"></label>
   <input type="text" th:field="*{givenname}" id="givenname" th:attr="value=${userInfo.givenname}" disabled="disabled" />
 </div></form>

并将其放入控制器的POST处理程序中，如下所示：

@RequestMapping(value = {"/showform"}, method = RequestMethod.POST)
public ModelAndView submitFormPage(@ModelAttribute("userInfo") @Valid UserInfo userInfo, 
      BindingResult bindingResult, RedirectAttributes redir) 
{      
  ModelAndView mview = new ModelAndView();

  if (bindingResult.hasErrors()) 
  {
     // show form again with error messages
     mview.addObject("userInfo", userInfo);
     mview.setViewName("/showform");
  }
  else 
  {
     // ...
  }

  return mview;
}

出于其他一些原因，存在RedirectAttributes。如您所见，表单上有两个元素，第一个被启用，第二个被禁用。它们的值已正确填入POJO中的预填充值，然后通过ModelMap传递到视图。我也可以在GET处理程序中跟踪它。 …