小编Ban*_*zay的帖子

我有一个多维数组：

var array 1 = 

[

 [[Name 1, 2, Nigeria], 
  [Name 3, 52, Egypt], 
  [Name 5, 75, South Africa]]

 [[Name 5, 8, Nigeria], 
  [Name 1, 62, Egypt], 
  [Name 3, 115, South Africa]]

 [[Name 6, 88, Nigeria], 
  [Name 3, 92, Egypt], 
  [Name 5, 825, South Africa]]

 ]

我想要一个新的平面数组：

var array 2 = [Name 1, Name 3, Name 5, Name 5, Name 1, Name 3, Name 6, Name 3, Name 5]

我尝试编写一个映射数组并返回第一个元素的函数：

function name(filteredName){
filteredName.map(function(firstName){
  return firstName[0]
}) 

}

然而，这只是返回：

[Name 1, …

当我尝试在我的应用程序中调用Ionic Cloud Deploy服务时,我在浏览器中收到以下错误消息.这种情况最近才开始发生,应用程序在真实设备上运行良好.

原因是什么？我安装了插件,它在config.xml中引用.我也尝试删除插件,删除所有平台,然后添加一切,但没有运气.在一个全新的项目中关注Ionic文档时,我甚至会看到这个错误.

Uncaught (in promise): Error: Missing deploy plugin: `ionic-plugin-deploy` Error: Missing deploy plugin: `ionic-plugin-deploy` at Object.
<anonymous> (http://localhost:8100/build/main.js:58591:17) at __webpack_require__ (http://localhost:8100/build/main.js:20:30) at Object.
<anonymous> (http://localhost:8100/build/main.js:59389:73) at __webpack_require__ (http://localhost:8100/build/main.js:20:30) at Object. 
<anonymous> (http://localhost:8100/build/main.js:57303:10) at __webpack_require__ (http://localhost:8100/build/main.js:20:30) at Object.
<anonymous> (http://localhost:8100/build/main.js:102834:79) at __webpack_require__ (http://localhost:8100/build/main.js:20:30) at Object.
<anonymous> (http://localhost:8100/build/main.js:91442:73) at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

我想使用"nowrap"或任何其他替代方法以与(无序列表)相同的方式阻止col-md-8在col-md-4上的堆叠.

下面是我的片段,我还提到了每个颜色的盒子的类.

谢谢.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
  #outside-container {
    border: 2px solid red;
    height: 500px;
    white-space: nowrap;
  }
  #container1 {
    border: 2px solid green;
    height: 300px;
  }
  #colmd8 {
    border: 2px solid yellow;
    height: 400px;
  }
  #row1 {
    border: 2px solid pink;
  }
  #list1 {
    border: 2px solid red;
    width: 200px;
    height: 200px;
  }
  #container2 {
    border: 2px solid navy;
    height: 300px;
  }
  li {
    display: inline-block;
  }
  ul {
    white-space: nowrap;
  }
  #col4 {
    border: …

我有一个带有社交链接的 div，我想在悬停任何具有不同颜色的锚点时根据悬停的链接设置背景颜色来填充整个 div。

目前，背景仅在锚文本下方发生变化。

我正在研究使用纯 CSS 为整个父级填充子级背景颜色的方法。

#social {
    width: 400px;
    height: 300px;
    position: relative;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}
a:link {
    text-decoration: none;
    transition: all .5s ease;
}
a:hover {
    color: white;
}
#facebook:hover {
    background: #3b5998;
}
#twitter:hover {
    background: lightblue;
}
#google-plus:hover {
    background: tomato;
}
#instagram:hover {
    background: lightgreen;
}

<div id="social">
               <a id="facebook" href="#"> <span>Facebook</span></a><br>
                <a id="twitter" href="#"> <span>Twitter</span></a><br>
                <a id="google-plus" href="#"> <span>Google plus</span></a><br>
                <a id="instagram" href="#"> <span>Instagram</span></a><br>
</div>

我有一个父母div,包含两个孩子,并排.第一个孩子是一个图像,必须是高度100%和58%宽度,边距自动和溢出隐藏.第二个子项包含文本,文本的长度决定了父项的高度.这是几个页面的模板,具有不同的文本长度,因此父级高度不同.如果不使用JS,我可以做我想做的事吗？感谢您的输入!代码如下.

HTML:

<div id="product-summary">

  <div class="product-image-container">
    <img />
  </div>

  <div id="product-details">
    <h3 class="product-title"></h3>
    <div class="product-description"></div>
  </div>

</div>

CSS:

.product-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 58%;
  height: 100%;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 50%;
    margin: auto;
    transform: translateX(-50%);
    min-width: 100%;
    height: 100%;
  }
}

#product-details {
  float: right;
  border: solid thin #777;
  height: ~"calc(100% - 2px)";
  width: 41%;
  text-align: center;
}

我很难搞清楚如何以某种方式实现bootstrap 3菜单,使其正确浮动并且部分崩溃,例如:

Brand                         Item 1 Item 2 Item 3 Item 4

折叠时看起来那样:

Brand                         Item 4 [Toggle menu]

我想我已经接近了,但无法让它正常工作:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".menu-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-right">
    <div class="collapse navbar-collapse menu-collapse">
        <ul class="nav navbar-nav">
            <li>Test right-middle</li>
        </ul>
    </div>
    <ul class="nav navbar-nav">
        <li>Test right-most</li>
    </ul>
</div>

任何想法如何我可以修复"最正确的测试"不被推到下一行？

我有一个div包含两个label元素.每个人都label应该站在一边div.由于标签是内联元素,我已经尝试过display: block并且还有display: inline-block边距生效,但结果不是预期的结果.

  div {
    color: #ffffff;
    background-color: #3f3f3f;
  }
  label:nth-of-type(1) {
    margin-left: 5px;
  }
  label:nth-of-type(2) {
    display: block;
    <!-- display: inline-block; -->
    margin-right: 5px;
    margin-left: auto;
  }

<div>
  <label>Left side label</label>
  <label>right side label</label>
</div>

正如您在代码执行中看到的那样,第二个标签不尊重边距,而是显示在第一个标签下面.

我在下面发布了我的代码,我想要做的是选择单击按钮下方的'p'元素.我尝试了几个选择器,但我没有成功的任何选择器......

这是我的HTML:

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

这是我的jQuery:

var container = $("#container");
var allPanels = $(".panel");
var acc = $(".accordion");
var active = $(".active");


$(document).ready(function(){

$(".panel:first").show();
$(".accordion:first").toggleClass("active");

acc.click(function() {
    active.toggleClass("active");
    $(this).toggleClass("active");

    allPanels.hide();
    $(this).children('p').children('p').first().show();
    //The above selector is wrong.
  });
});