hộp bóng trên bootstrap 3 container

Tôi đang xây dựng một trang web nhỏ bằng cách sử dụng bootstrap. Cấu trúc cơ bản như sau:hộp bóng trên bootstrap 3 container

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" rel="stylesheet"> 
    <style tpye="text/css"> 
     .row { 
      height: 100px; 
      background-color: green; 
     } 

     .container { 
      margin-top: 50px; 
      box-shadow: 0 0 10px 10px black; /*THIS does not work as expected*/ 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row">one</div> 
     <div class="row">two</div> 
     <div class="row">three</div> 
    </div> 
    </body> 
</html>

Nhìn thấy nó trong hành động: http://jsfiddle.net/ZDCjq/

Bây giờ tôi muốn toàn bộ trang web để có một DropShadow trên tất cả 4 phía. Vấn đề là, lưới khởi động sử dụng các lề tiêu cực và điều này làm cho các hàng chồng chéo lên bóng.

Có cách nào để thực hiện việc này trong khi vẫn giữ nguyên tất cả chức năng khởi động không?

EDIT: Kết quả mong đợi là thế này: http://i.imgur.com/rPKuDhc.png

EDIT: vấn đề này là chỉ xuất hiện cho đến khi bootstrap 3 RC2. bootstrap cuối cùng 3 làm cho giải pháp thay thế lỗi thời.

Nguồn

2013-08-15 sloewen

Chào bạn, bạn có phiền đăng một hình ảnh về những gì bạn muốn đạt được? Cũng nên nhớ rằng khi một cái gì đó không đi kèm với bootstrap bạn thực sự có thể chỉ cần viết CSS của riêng bạn. – sulfureous

Bạn có yêu cầu bóng đổ có cùng chiều rộng trên cả 4 mặt không? – edsioufi

@edsioufi: có thats chính xác những gì tôi cần. – sloewen

http://jsfiddle.net/Y93TX/2/

 @import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css"); 

.row { 
    height: 100px; 
    background-color: green; 
} 
.container { 
    margin-top: 50px; 
    box-shadow: 0 0 30px black; 
    padding:0 15px 0 15px; 
} 



    <div class="container"> 
     <div class="row">one</div> 
     <div class="row">two</div> 
     <div class="row">three</div> 
    </div> 
</body>

Nguồn

2013-08-15 23:30:37 benny

Thats kết quả sẽ như thế nào. Nhưng vấn đề là tôi muốn duy trì mọi tính linh hoạt mà bootstrap mang lại cho tôi (sẵn sàng cho thiết bị di động). Giải pháp của bạn bỏ qua bootstrap. – sloewen

Kết quả tương tự, nhưng chỉ với CSS ban đầu bạn có http://jsfiddle.net/Y93TX/ – benny

Trong bootstrap, bạn phải sử dụng các lớp 'row-fluid' và' container-fluid' để duy trì tính linh hoạt và chức năng của nó tốt với những gì đến cổ phiếu với Bootstrap. – sulfureous

Thêm một div thêm xung quanh tất cả các div chứa bạn muốn thả bóng để đóng gói. Thêm các lớp đổ bóng và vùng chứa vào div bổ sung. Lớp .container sẽ giữ tính lưu động. Sử dụng lớp. Shadow-shadow (hoặc bất cứ thứ gì bạn thích) để thêm thuộc tính box-shadow. Sau đó, nhắm mục tiêu div .drop-shadow và phủ nhận các kiểu không mong muốn .container thêm - chẳng hạn như bên trái & đệm phải.

Ví dụ: http://jsfiddle.net/SHLu4/2/

Nó sẽ có cái gì đó như:

<div class="container drop-shadow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8">Main Area</div> 
      <div class="col-md-4">Side Area</div> 
     </div> 
    </div> 
</div>

Và CSS của bạn:

<style> 
    .drop-shadow { 
     -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5); 
     box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5); 
    } 
    .container.drop-shadow { 
     padding-left:0; 
     padding-right:0; 
    } 
</style>

Nguồn

2014-01-02 15:47:33 mattsnowkygov

tại sao có một '.container' lồng nhau bên trong một' .container' div? Làm thế nào là người đầu tiên cần thiết? – ayjay

Bạn nên cung cấp cho các thùng chứa một id và sử dụng rằng trong css tùy chỉnh của bạn tệp (cần được liên kết sau css bootstrap):

#container { box-shadow: values }

Nguồn

2015-07-18 19:24:20

Đối với những người muốn hộp-shadow trên col-* chứa chính nó và không phải trên .container, bạn có thể thêm div khác chỉ bên trong phần tử col-*, và thêm cái bóng đó. Phần tử này sẽ không có phần đệm và không gây trở ngại.

Hình ảnh đầu tiên có box-shadow trên phần tử col-*. Do phần đệm 15px trên phần tử col, bóng được đẩy vào bên ngoài của phần tử div thay vì trên các cạnh hình ảnh của nó.

<div class="col-md-4" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);"> 
    <div class="thumbnail"> 
     {!! HTML::image('images/sampleImage.png') !!} 
    </div> 
</div>

Hình ảnh thứ hai có một wrapper div với box-shadow trên đó. Điều này sẽ đặt box-shadow trên các cạnh hình ảnh của phần tử.

<div class="col-md-4"> 
    <div id="wrapper-div" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);"> 
     <div class="thumbnail"> 
      {!! HTML::image('images/sampleImage.png') !!} 
     </div> 
    </div> 
</div>

Nguồn

2015-07-30 15:43:52 IamFace

Có cách nào tôi có thể thêm nhãn ở giữa hình ảnh không? – Abhi

hộp bóng trên bootstrap 3 container

Trả lời

Các vấn đề liên quan