機能を変更せずにサイドバーを右に移動するには

Question

私が使用しているコードは以下のとおりです。

私がする必要があるのは、機能を変更せずにサイドバーを右に移動することだけです。私はCSS margin-leftを設定することでこれを行うことができましたが、それはサイドバーの機能に影響を与えました。あなたはleft:250pxを持って

#wrapper { 
 
padding-left: 0; 
 
-webkit-transition: all 0.5s ease; 
 
-moz-transition: all 0.5s ease; 
 
-o-transition: all 0.5s ease; 
 
transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
padding-left: 250px; 
 
} 
 

 
#sidebar-wrapper { 
 
z-index: 1000; 
 
position: fixed; 
 
left: 250px; 
 
width: 0; 
 
height: 100%; 
 
margin-left: -250px; 
 
overflow-y: auto; 
 
background: #000; 
 
-webkit-transition: all 0.5s ease; 
 
-moz-transition: all 0.5s ease; 
 
-o-transition: all 0.5s ease; 
 
transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
width: 100%; 
 
position: absolute; 
 
padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
position: absolute; 
 
margin-right: -250px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
position: absolute; 
 
top: 0; 
 
width: 250px; 
 
margin: 0; 
 
padding: 0; 
 
list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
text-indent: 20px; 
 
line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
display: block; 
 
text-decoration: none; 
 
color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
text-decoration: none; 
 
color: #fff; 
 
background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
height: 65px; 
 
font-size: 18px; 
 
line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
color: #fff; 
 
background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
#wrapper { 
 
    padding-left: 250px; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 0; 
 
} 
 

 
#sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
} 
 

 
#page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
} 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
     <ul class="sidebar-nav"> 
 
      <li class="sidebar-brand"> 
 
       <a href="#"> 
 
        MyWeb 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Dashboard</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">About</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Services</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Contact</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 

 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
       <div class="col-lg-12"> 
 

 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Sidebar</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

。なぜそれをright:0と置き換えてみませんか？

http://www.bootply.com/MQS5QZjHi4

Answer 2

変更あなたのCSSへ：サイドバーの

#wrapper { 
 
padding-right: 0; 
 
-webkit-transition: all 0.5s ease; 
 
-moz-transition: all 0.5s ease; 
 
-o-transition: all 0.5s ease; 
 
transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
padding-right: 250px; 
 
} 
 

 
#sidebar-wrapper { 
 
z-index: 1000; 
 
position: fixed; 
 
right: 250px; 
 
width: 0; 
 
height: 100%; 
 
margin-right: -250px; 
 
overflow-y: auto; 
 
background: #000; 
 
-webkit-transition: all 0.5s ease; 
 
-moz-transition: all 0.5s ease; 
 
-o-transition: all 0.5s ease; 
 
transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
width: 250px; 
 
} 
 

 
#page-content-wrapper { 
 
width: 100%; 
 
position: absolute; 
 
padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
position: absolute; 
 
margin-right: -250px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
position: absolute; 
 
top: 0; 
 
width: 250px; 
 
margin: 0; 
 
padding: 0; 
 
list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
text-indent: 20px; 
 
line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
display: block; 
 
text-decoration: none; 
 
color: #999999; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
text-decoration: none; 
 
color: #fff; 
 
background: rgba(255,255,255,0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
text-decoration: none; 
 
} 
 

 
.sidebar-nav > .sidebar-brand { 
 
height: 65px; 
 
font-size: 18px; 
 
line-height: 60px; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a { 
 
color: #999999; 
 
} 
 

 
.sidebar-nav > .sidebar-brand a:hover { 
 
color: #fff; 
 
background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
#wrapper { 
 
    padding-right: 250px; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-right: 0; 
 
} 
 

 
#sidebar-wrapper { 
 
    width: 250px; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
} 
 

 
#page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
} 
 
}

幸運

Answer 3

変更位置は、絶対に
を固定し、その後のmargin-left

を使用します

#sidebar-wrapper{ 
    position: absolute; 
    margin-left: 900px; 
} 

おかげ

Answer 4

はfloat:rightを使用してみてください。しかし、それは#menu-toggle親コンテナの高さに影響します。このためには、以下のようにclear:bothというスタイルの空のdivを追加します。

<div class="col-lg-12"> <a href="#menu-toggle" class="btn btn-default" id="menu-toggle" style="float: right;">Sidebar</a> <div style="clear:both"></div> </div>