小编vik*_*007的帖子

我开始使用flex,我很喜欢它的工作方式.

我正在使用flex布局,我希望btn-group里面的类dashboard-body能够达到父级的全宽.现在它的宽度等于按钮宽度.

我想在这里实现的是,我想在两个按钮之间添加空格,我不想使用右边或左边边距.我希望btn-groupdiv为其父级的全宽,dashboard-body以便我可以使用flex属性align-content: space-between在两个按钮之间有足够的空间.

除了在按钮周围添加边距/填充以执行相同操作之外,还有其他方法吗？

谢谢.

这是代码:

.dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>

我正在使用bootstrap并使用flex进行布局.

目前按钮正在占据容器的高度.文本下面有太多的空间,我想删除i,当我向按钮添加填充时,它的大小不均匀.我试图通过线高调整大小,但我试图找到实际的解决方案和原因,为什么我有这个问题.

我在这里缺少任何与flex相关的东西,还是其他东西？任何帮助将受到高度赞赏.谢谢.

.vessel-card {
  display: flex;
  flex-direction: column;
}
.vessel-card h3 {
  margin: 0;
  padding: 20px 0;
}
.departure-card {
  display: flex;
  padding: 20px 0;
  border-top: 2px solid #888;
}
.departure-card p {
  margin-right: 10px;
}
.departure-card:last-child {
  border-bottom: 2px solid #888;
}
.departure-card .btn-explore {
  border: 1px solid #000;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 vessel-card">
      <a href="cienfuegos-from-havana.html" class="special-departure">
        <img src="http://placehold.it/350x150">
      </a>
      <h3>Vessel: …

我正在尝试在弹性盒的帮助下创建网格布局。

我正在做的是，我在左侧和右侧为父级提供负边距，然后在左侧和右侧为其子级提供相同数量的填充量以用于装订线空间。

我正在尝试制作 5 列网格，当我使用时，flex: 1 1 20%所有列都不会出现在同一行中。最后一个包裹在下一行。情况不应如此，因为flex-basis设置为 20%，并且父级应将所有五列容纳在一行中。

但是当我尝试这样做时，第四个网格项被包裹在下一行。

这是此问题的工作代码笔。更新了代码笔： https://codepen.io/vikrantnegi007/pen/BZwGJQ

谢谢。

我是新手hooks，最近开始在我的 React Native 项目中使用钩子。

我正在使用AsyncStorage. 首先我使用钩子初始化初始data和setData状态useState：

const [data, setData] = useState([]);

textInput我使用两个和提交按钮将数据保存到 AsyncStorage。这是saveData函数：

const saveData = async () => {
  const arrData = [{ name: 'vikrant', phone: 123456 }]; // [{ name, phone}] from the textInput

  const storedData = await AsyncStorage.getItem('user');
  const storedDataParsed = JSON.parse(storedData);

  let newData = [];

  if (storedData === null) {
    // save
    await AsyncStorage.setItem('user', JSON.stringify(arrData));
  } else {
    newData = [...storedDataParsed, user];
    await …

li我的html代码中有多个元素是可折叠列表.我想切换li除了使用jQuery单击的元素之外的所有其他元素.

我的代码:

$(document).ready(function () {
    $("#boys").on('click', function () {
        $("#hacky").toggle();
        $("#walking1").toggle();
        $("#walking2").toggle();
        $("#walking3").toggle();
    });

    $("#hacky").on('click', function () {
        $("#boys").toggle();
        $("#walking1").toggle();
        $("#walking2").toggle();
        $("#walking3").toggle();
    });

    $("#walking1").on('click', function () {
        $("#boys").toggle();
        $("#hacky").toggle();
        $("#walking2").toggle();
        $("#walking3").toggle();
    });

    $("#walking2").on('click', function () {
        $("#boys").toggle();
        $("#hacky").toggle();
        $("#walking1").toggle();
        $("#walking3").toggle();
    });

    $("#walking3").on('click', function () {
        $("#boys").toggle();
        $("#hacky").toggle();
        $("#walking1").toggle();
        $("#walking2").toggle();
    });
});

我给每个li元素一个id,然后我切换它们.这不是最有效的方法,代码适用于静态文本.该li元素可以增加或减少,我想这样做是一种有效的方式,使得即使元素在将来添加我就不必每次添加一个ID和编写代码.我不知道如何有效地使用find()和this标记,我是jQuery的新手.

Editted:

HTML代码:

<div class="weekday-block">
  <ul class="collapsible roster-collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active roster-header">
        <h2>Tue 30 June,2015</h2>
      </div> …