Question

我想使用bootstrap实现类似于以下图像的面板：

图01：侧栏处于满状态。

左侧面板将显示/隐藏按钮。在隐藏时，它会向上滑动到最小状态（图2）。主div容器的大小会增加并填充左边的空白区域。所有调整大小都需要使用过渡动画。

图02：处于最小状态的侧栏。

任何帮助/提示，如何实现？

Answer 1

一种方法是将(function poll(synchronous) { setTimeout(function() { $.ajax({ url: "server script path", type: "GET", success: function(data) { console.log("polling"+data); if(data.is_running === false){ console.log("stop polling"); $("#overlay").show(); } }, dataType: "json", complete: poll, timeout: 2000, async: !synchronous }) }, 50000); })(true);与float：

一起使用

overflow: hidden

.parent{
  overflow: hidden;
  text-align: center;
}
.panel{
  float: left;
  width: 20%;
  background-color: #EFEF66;
}
.navigation{
  float: right;
  width: 80%;
  background-color: #EF66EF;
}
.main{
  overflow: hidden;
  width: auto;
  clear: right;
  background-color: #66EFEF;
}

在上面的代码段中，您将其作为主要状态。现在，如果您希望<div classs="parent"> <div class="panel">Side Panel</div> <div class="navigation">Navigation</div> <div class="main">Main section</div> </div>向下延伸，只需为panel强制height：

panel

.parent{
  overflow: hidden;
  text-align: center;
}
.panel{
  float: left;
  width: 20%;
  height: 50px;
  background-color: #EFEF66;
}
.navigation{
  float: right;
  width: 80%;
  background-color: #EF66EF;
}
.main{
  overflow: hidden;
  width: auto;
  clear: right;
  background-color: #66EFEF;
}

Answer 2

鉴于你到目前为止没有展示你所得到的东西，我很难帮助你。

Check this codepen for a little help with the HTML structure

<强> HTML

public class PlayState extends State {

    long startTime;

    private SpriteBatch batch;
    private BitmapFont font;

    public PlayState(GameStateManager gsm) {
        super(gsm);
        cam.setToOrtho(false, Game.WIDTH, Game.HEIGHT);
        startTime = System.currentTimeMillis();
        batch = new SpriteBatch();
        font = new BitmapFont(Gdx.files.internal("text.fnt"), Gdx.files.internal("text.png"), false);
        font.getData().setScale(.5f, .5f);
    }

    @Override
    protected void handleInput() {

    }

     @Override
    public void update(float dt) {

    }

    @Override
    public void render(SpriteBatch sb) {
        sb.setProjectionMatrix(cam.combined);
        System.out.println("Score = " + ((System.currentTimeMillis() - startTime) / 100));

        batch.begin();
        font.draw(batch, "Score: " + Float.toString((Float) ((System.currentTimeMillis() - startTime) / 100f)), 20, 470);
        font.setColor(Color.WHITE);
        batch.end();
    }

    @Override
    public void dispose() {
        bg.dispose();
        bird.dispose();
        ground.dispose();
        batch.dispose();
        font.dispose();
        for(Tube tube : tubes)
            tube.dispose();
        for(Cloud cloud : clouds)
            cloud.dispose();
        //stage.dispose();
        System.out.println("Play State Disposed");
    }

    private void updateGround() {
        if(cam.position.x - (cam.viewportWidth / 2) > groundPos1.x + ground.getWidth())
            groundPos1.add(ground.getWidth() * 2, 0);
        if(cam.position.x - (cam.viewportWidth / 2) > groundPos2.x + ground.getWidth())
            groundPos2.add(ground.getWidth() * 2, 0);
    }
}

<强> SCSS

<div class="container-fluid">
  <div class="header">
    <div class="col-xs-3 header-left">
      Hi
    </div>
  <div class="col-xs-9">
  </div>
</div>
<div class="app-body">
  <div class="col-xs-12 inner-body"></div>
</div>

你应该能够从我给你的代码开始，找到你想要的东西。但请记住，我的代码显示了向下滑动的状态。您必须添加动画和JS事件才能达到您想要的效果。

如何使用expndable main div

2 个答案: