Question

我正在尝试在我的MVC布局中展开和折叠补充工具栏。我使用的示例略有变化：enter link description here

问题是，一旦侧边栏崩溃，我的“视图”的内容就不会扩展。是否可以这样做？如果是这样，有没有人知道代码示例，这种事情在MVC中有效？< / p>

我尝试过实施Artanis的建议，但它仍然没有用。这是我的_Layout.cshtml页面中的代码：

  <div class="one-row-location">
    @RenderBody()
    <div class="sidebar-nav">
        <div class="container-fluid">
            <div class="row row-offcanvas row-offcanvas-left">

                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                    <div class="list-group">
                        <a href="#" class="list-group-item active">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                        <a href="#" class="list-group-item">Link</a>
                    </div>


                </div>
                <div class="col-xs-12 col-sm-9 content">
                    <p class="pull-left">
                        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                    </p>

                </div><!--/span-->

            </div><!--/row-->

        </div><!-- /.container -->
    </div>

以下是我的Index.cshtml页面中的内容（只是垃圾以查看页面内容是否展开）：

<div class="location-field">
This is a test.<input id="Text1" type="text" />
<br />
this is another test!
<br />
And another
<br />

以下是我的CSS文件中的内容：

    .one-row-location {
  width: 100%; 
    display: table;
}
.location-field{
    display: table-cell;
    vertical-align: top;
}
.sidebar-nav {
    position: absolute;
    top: 100px;
    width: 2000px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-cell;

我觉得好像我很亲密，但我显然缺少或不理解某些东西。谢谢你的帮助！

Answer 1

我建议将display: table用于容器DIV，将display: table-cell用于两个子DIV（一个用于侧边栏，另一个用于内容）。边栏DIV可以具有固定的宽度（可以通过使用jQuery在200px（侧边栏打开）和0px（侧边栏折叠）之间切换来动画），但是内容DIV应该没有宽度设置，这意味着它将扩展到剩余的可用空间因为display: table-cell。

这是我昨天为不同问题说明这种效果的小提琴。在此示例中，输入字段的图标已定义宽度，但无论容器尺寸如何，输入字段都将展开。在您的情况下，唯一的区别是容器DIV将是屏幕宽度的100％。

http://jsfiddle.net/p0s8yad7/3/

HTML

    <div class="one-row-location">
    <div class="location-icon"><img src="http://oi62.tinypic.com/10ng7b5.jpg"></div>
          <div class="location-field"><input  class="input-label inputlocation" type="text" name="geolocation" id="geolocation" placeholder="Lokation" value="" />
        </div>

</div>

和CSS

.one-row-location {
  width: 80%;  // For demonstartion purposes - this width can be whatever is needed
  display: table;
}
.location-field{
    display: table-cell;
    width: 100%;
    vertical-align: top;
}
.inputlocation{
    font-size:14px;
    color:#99999f;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
    font-style: italic;
    height:27px;
    width:100%;
    margin-left: 0px;
}
.location-icon {
    display: table-cell;
    width: 29px;
    height:33px;
}

在MVC布局中折叠边栏

1 个答案: